1
나는 이것을 사용하기 위해 이미 flexbox를 사용했지만 어떤 이유로 작동하지 않습니다. 작은 화면 크기에서는 모든 것이 중앙에 위치합니다. 나는 justify-content를하려고 시도했다 : flexbox를위한 센터. 그러나 그것은 작동하지 않는다. 내가 본 내용을 보여주는 스크린 샷과 코드 스 니펫을 표시합니다. 스 니펫을 볼 수도 있지만 백분율과 픽셀의 조합을 사용하므로 이상하게 보일 수 있습니다. 미디어 쿼리없이 간단한 센터링을 처리 할 수 있습니까? 비록 내가 하나를 사용했다하더라도, 나는 여전히 내 바탕 화면의 중심에 그것을 얻을 수 없습니다.화면 크기를 무시한 div 요소 가운데 맞추기
html {
\t height: 100%;
}
body{
\t height: 100%;
\t margin: 0;
\t font-family: courier;
\t font-size: 19px;
}
#container {
\t min-height: 100%;
\t margin-bottom: -150px;
\t width: 100%;
}
#container:after {
\t content: "";
\t display: block;
}
#content{
\t display:flex;
\t float:left;
\t width: 800px;
\t flex-wrap: wrap;
\t justify-content: center;
\t
}
#footer, #container:after{
\t height: 150px;
}
#footer{
\t background-color: #006699;
\t clear: both;
}
.wrap {
\t margin: 0 auto;
\t width: 100%;
\t display: flex;
\t align-items: center;
\t flex-wrap: nowrap;
}
.sub {
\t padding: 12px;
\t width: 32%;
\t height: 120px;
\t color: white;
\t border-right: solid white 1px;
}
.sub:last-child{
\t border: 0px;
}
#leftbar{
\t width: 10%;
\t height: calc(100vh - 150px);
\t background-color: black;
\t float:left;
}
#rightbar{
\t width: 10%;
\t height: calc(100vh - 150px);
\t background-color: black;
\t float: right;
}
#nav {
list-style: none;
font-weight: bold;
width: 100%;
text-align: center;
background: rgba(0, 102, 153, 0.4);
height: 100px;
}
#nav ul {
list-style-type: none;
margin: 0px;
padding: 0;
overflow: auto;
// background-color: #006699;
text-align: center;
}
#nav li {
margin: 0px;
display: inline-block;
}
#nav li a {
padding: 10px;
display: inline-block;
text-decoration: none;
font-weight: bold;
font-size: 30px;
color: white;
// background-color: #006699;
}
#nav li a:hover {
color: white;
text-shadow: 2px 2px 4px white;
}
.clear {
clear: both;
}
div.img {
\t margin: 5px;
\t border: 1px solid #595959;
\t float: left;
\t width: 180px;
}
div.img:hover{
\t border: 1px solid #b3b3ff;
}
div.img img {
\t width: 100%;
\t height: auto;
}
div.desc{
\t padding: 15px;
\t text-align: center;
}
div.head{
\t text-align:center;
\t background-color:black;
\t color: orange;
}<!DOCTYPE HTML>
<html>
<head lang="en">
\t <link rel="stylesheet" type="text/css" href="new.css" />
\t <meta charset="UTF-8">
\t <title></title>
\t
\t <style>
\t
\t </style>
\t <script>
\t
\t </script>
\t
</head>
<body>
<div id="container">
<div id="nav">
<ul>
\t <li><a href="#">Home</a></li>
\t <li><a href="#">Works</a></li>
\t <li><a href="#">About</a></li>
</ul>
</div>
<div class="clear"></div>
<div class="upperbox">
<div id="leftbar"> </div>
<div id="rightbar"></div>
<div id="content">
<div class="img">
\t <div class="head">Color Palettes</div>
\t <img src="purple.png" alt="the color purple">
\t <div class="desc">Color</div>
</div>
<div class="img">
\t <div class="head">Color Palettes</div>
\t <img src="blue.png" alt="the color blue">
\t <div class="desc">Color</div>
</div>
<div class="img">
\t <div class="head">Color Palettes</div>
\t <img src="yellow.png" alt="the color yellow">
\t <div class="desc">Color</div>
</div>
<div class="img">
\t <div class="head">Color Palettes</div>
\t <img src="brown.jpg" alt="the color yellow">
\t <div class="desc">Color</div>
</div>
<div class="img">
\t <div class="head">Color Palettes</div>
\t <img src="grey.jpg" alt="the color yellow">
\t <div class="desc">Color</div>
</div>
<div class="img">
\t <div class="head">Color Palettes</div>
\t <img src="green.png" alt="the color yellow">
\t <div class="desc">Color</div>
</div>
<div class="img">
\t <div class="head">Color Palettes</div>
\t <img src="red.png" alt="the color yellow">
\t <div class="desc">Color</div>
</div>
<div class="img">
\t <div class="head">Color Palettes</div>
\t <img src="gold.jpg" alt="the color yellow">
\t <div class="desc">Color</div>
</div>
</div>
</div>
</div>
<div id="footer">
\t <div class="wrap">
\t \t <div class="sub">Lorem Ipsum</div>
\t \t <div class="sub">Lorem Ipsum </div>
\t \t <div class="sub">Lorem Ipsum </div>
\t </div>
</div>
\t
\t
\t
\t
\t </body>
\t
\t </html>
두 가지 경우 모두 컨테이너의 중심에 있지만 크기가 큰 화면에서는 너비가 800px이므로 항목을 전체 화면이 아닌 800px의 가운데에 배치합니다. –