我正在练习制作一个针对移动屏幕分辨率的网页。我成功地调整了宽度。我如何处理这个高度？我的 wrapper 继续保持在顶部而不是垂直对齐。
我已经看到很多关于这个问题的问题，但还找不到在我的 css 上指定的解决方案。希望有人能帮助我。
HTML
<body>
<div class="wrapper">
<div class="header">
</div>
<div class="content">
<a href="http://test"><div id="topleftbox"></div></a>
<a href="http://test"><div id="toprightbox"></div></a>
<a href="http://test"><div id="bottomleftbox"></div></a>
<a href="http://test"><div id="bottomrightbox"></div></a>
</div>
</div>
CSS
body {
}
.wrapper {
margin: 0 auto;
width: 100%;
height: 100%;
}
.header {
min-width: 50%;
height: 20px;
}
.content {
min-width: 500px;
width: 40%;
height: auto;
margin: 0 auto;
}
#topleftbox {
background: url(..);
background-repeat: no-repeat;
width: 229px;
height: 228px;
float: left;
}
#toprightbox {
background: url(...);
background-repeat: no-repeat;
width: 229px;
height: 228px;
float: right;
}
etc.
最佳答案
要使用display:table-cell;，您需要模拟完整的表格结构。幸运的是，您不必添加任何额外的标记，因为您可以根据 html 和 body 标记设置样式:
html{display:table;width:100%;height:100%;}
body{display:table-row;}
.wrapper{
display:table-cell;
vertical-align:middle;
text-align:center;
}
注意:此垂直居中 .wrapper 的内容，而不是 div 本身。
关于html - 如何垂直对齐 wrapper ，使其在(移动)屏幕上居中？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/15100577/