Question

我已经使用过flexbox来试试这个，但由于某种原因它不起作用。在较小的屏幕尺寸上，一切都在中心。我尝试过对齐内容：flexbox的中心，但这不起作用。我将放下代码片段以及显示我所看到的内容的屏幕截图。您可以查看片段，但它使用百分比和像素的组合，因此它可能看起来很奇怪。没有媒体查询，我可以处理简单的居中吗？即使我确实使用了一个，我仍然无法将它放在我的桌面上。

full screen version

smaller screen version

＆＃13;

html {
	height: 100%;
}




body{
	height: 100%;
	margin: 0;
	font-family: courier;
	font-size: 19px;
}


#container {

	min-height: 100%;
	margin-bottom: -150px;
	width: 100%;


}

#container:after {

	content: "";
	display: block;
}

#content{
	display:flex;
	float:left;
	width: 800px;
	flex-wrap: wrap;
	justify-content: center;

	

}


#footer, #container:after{

	height: 150px;
}


#footer{

	background-color: #006699;
	clear: both;
}

.wrap {
	margin: 0 auto;
	width: 100%;
	display: flex;
	align-items: center;
	flex-wrap: nowrap;
}

.sub {

	padding: 12px;
	width: 32%;
	height: 120px;
	color: white;
	border-right: solid white 1px;
}

.sub:last-child{

	border: 0px;
}




#leftbar{

	width: 10%;
	height: calc(100vh - 150px);
	background-color: black;
	float:left;


}

#rightbar{
	width: 10%;
	height: calc(100vh - 150px);
	background-color: black;
	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 {
	margin: 5px;
	border: 1px solid #595959;
	float: left;
	width: 180px;



}

div.img:hover{

	border: 1px solid #b3b3ff;
}

div.img img {
	width: 100%;
	height: auto;
}

div.desc{
	padding: 15px;
	text-align: center;
}

div.head{

	text-align:center;
	background-color:black;
	color: orange;

}

＆＃13;

<!DOCTYPE HTML>
<html>
<head lang="en">

	<link rel="stylesheet" type="text/css" href="new.css" />
	<meta charset="UTF-8">
	<title></title>
	
	<style>
	
	</style>
	<script>
	
	</script>
	
</head>

<body>

<div id="container">

<div id="nav">

<ul>
	<li><a href="#">Home</a></li>
	<li><a href="#">Works</a></li>
	<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">
	<div class="head">Color Palettes</div>
	<img src="purple.png" alt="the color purple">
	<div class="desc">Color</div>

</div>

<div class="img">
	<div class="head">Color Palettes</div>
	<img src="blue.png" alt="the color blue">
	<div class="desc">Color</div>

</div>


<div class="img">
	<div class="head">Color Palettes</div>
	<img src="yellow.png" alt="the color yellow">
	<div class="desc">Color</div>

</div>

<div class="img">
	<div class="head">Color Palettes</div>
	<img src="brown.jpg" alt="the color yellow">
	<div class="desc">Color</div>

</div>

<div class="img">
	<div class="head">Color Palettes</div>
	<img src="grey.jpg" alt="the color yellow">
	<div class="desc">Color</div>

</div>

<div class="img">
	<div class="head">Color Palettes</div>
	<img src="green.png" alt="the color yellow">
	<div class="desc">Color</div>

</div>

<div class="img">
	<div class="head">Color Palettes</div>
	<img src="red.png" alt="the color yellow">
	<div class="desc">Color</div>

</div>

<div class="img">
	<div class="head">Color Palettes</div>
	<img src="gold.jpg" alt="the color yellow">
	<div class="desc">Color</div>

</div>

</div>

</div>










</div>


<div id="footer">
	<div class="wrap">
		<div class="sub">Lorem Ipsum</div>
		<div class="sub">Lorem Ipsum </div>
		<div class="sub">Lorem Ipsum </div>
	</div>
</div>
	
	
	
	


	</body>
	
	</html>

＆＃13;

Answer 1

您可以为 #content 提供 margin: 0 auto; 的CSS，如下所示：

#content {
  margin: 0 auto;
}

（也许你还必须不浮动它在左边）

或者你可以看一下以元素为中心的其他现代可能性：

https://css-tricks.com/centering-percentage-widthheight-elements/
https://css-tricks.com/centering-in-the-unknown/
https://codemyviews.com/blog/how-to-center-anything-with-css

Answer 2

从float:left;删除#content并向其添加margin: 0 auto。

将div元素居中，忽略屏幕大小

2 个答案: