1
フレックスボックスは既に試してみましたが、何らかの理由で動作しません。小さな画面サイズでは、すべてが中央に配置されます。私はjustify-content：flexboxのセンターをやってみましたが、それは動作しません。私は、コードスニペットだけでなく、私が見ていることを示すスクリーンショットを表示します。スニペットを見ることができますが、パーセントとピクセルの組み合わせを使用するため、奇妙に見えることがあります。メディアの問い合わせなしに簡単なセンタリングを処理できますか？私が1つを使ったとしても、それを私のデスクトップの中央に置くことはできません。画面サイズを無視した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のコンテナに集中します。 –