我真的是 HTML 的新手，正在处理一个需要今天完成的元素。在这里，我想要 4 张图像在页面中心水平对齐，背景为白色。
<!DOCTYPE html>
<html>
<head>
<title>Welcome to Food Court</title>
<link rel="stylesheet" href="normalize.css">
<link rel="stylesheet" href="style2.css">
</head>
<body>
<div id="wrapper">
<div class="navigation" >
<ul>
<li>
<a href="myfile.htm"><img src="images/fb.png" alt="Smiley face" height="150px"width="150px"></a>
</li>
<li>
<a href="myfile.htm"> <img src="images/Parking.png" alt="Smiley face" height="150px"width="150px"> </a>
</li>
<li>
<a href="myfile.htm"><img src="images/signage.png" alt="Smiley face" height="150px"width="150px"></a>
</li>
<li>
<a href="myfile.htm"><img src="images/ticketing.png" alt="Smiley face" height="150px"width="150px"></a>
</li>
</ul>
</div>
</div>
</body>
</html>
CSS
html {
background: url('images/bg.png');
font-size: 10pt;
}
label {
display: block;
color: #999;
margin-bottom:2px;
margin-top:10px;
}
.navigation ul {
margin: 0;
padding: 0;
list-style-type: none;
}
.navigation li {
display: inline;
float: left;
}
.navigation ul li a { text-decoration: none;
padding: .2em 1em;
}
#wrapper{
background:white;
width:900px;
height:300px;
top:50%;
left:50%;
margin:-100px 0 0 -150px;
position:absolute;
}
.navigation{
position:absolute;
width:750px;
height:200px;
z-index:15;
top:50%;
left:50%;
margin:-100px 0px 100px -150px;
}
我在这里面临的问题是页面没有完全对齐页面的中心。如果我需要白色背景，我还必须对用于#navigation 的包装器使用相同的属性。但是有些事情搞砸了，我并没有真正得到预期的输出，正如你从下面的 fiddle 中看到的那样。
图像没有从 Wrapper div 的开始对齐，而是留出了空间..
我需要包含 4 张图像的列表，这些图像正好位于页面中央，背景为白色 ..
如果有人能指导我这里到底发生了什么，那将很有帮助..
因为我没有选择，所以我别无选择，只能在这里寻求帮助。在此先感谢。!
请在下面找到 fiddle 链接..
最佳答案
看看这个 JSFiddle你可以使用绝对中心类来将子内容对齐到中心。另请注意，我在示例中修复的 html-ui 语法中存在一些错误
.absolute-center{
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-direction: normal;
-moz-box-direction: normal;
-webkit-box-orient: horizontal;
-moz-box-orient: horizontal;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
-webkit-flex-wrap: nowrap;
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
-webkit-box-pack: center;
-moz-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-align-content: stretch;
-ms-flex-line-pack: stretch;
align-content: stretch;
-webkit-box-align: center;
-moz-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
}
关于html - 使用包装器将列表中的 4 张图像与页面的中心对齐，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/25462592/