我想弄清楚如何使一系列图像在页面上垂直对齐,以便人们可以左右滚动并查看它们。我尝试过'vertical-align:middle'以及将顶部%调整为无济于事,这是当前设置
.page {
position: absolute;
width: 2400px;
vertical-align: middle;
}
.column {
float: left;
width: 400px;
padding: 5px;
}
.row::after {
content: "";
clear: both;
display: table;
}
<div class="page">
<div class="row">
<div class="column">
<img src="https://68.media.tumblr.com/94a2f217cbd0e1d3ae663764bfa3bef3/tumblr_oazuptRyRh1uz08p6o1_1280.jpg" width="100%" />
</div>
<div class="column">
<img src="http://static.tumblr.com/vbfmte2/gRAo4t8mm/icymi_03.png" width="100%" />
</div>
<div class="column">
<img src="http://static.tumblr.com/vbfmte2/QNbo4t8mh/moving_01.png" width="100%" />
</div>
<div class="column">
<img src="https://68.media.tumblr.com/94a2f217cbd0e1d3ae663764bfa3bef3/tumblr_oazuptRyRh1uz08p6o1_1280.jpg" width="100%" />
</div>
<div class="column">
<img src="http://static.tumblr.com/vbfmte2/gRAo4t8mm/image082.png" width="100%" />
</div>
<div class="column">
<img src="http://static.tumblr.com/vbfmte2/QNbo4t8mh/image257.png" width="100%" />
</div>
</div>
</div>
最佳答案
您可以使用table-layout
,所以您可以使用一行,并且可以从父容器使用vertical-align:middle
。
这是一个不带float
的示例,对于早于FF 1或IE8的浏览器来说还可以。今天,在这种情况下grid
和flex
可以做类似的工作。在整个页面中播放摘要以查看vertical-align
行为
body {
margin: 0;
padding: 0;
}
.page {
overflow-x: auto;
overflow-y: hidden;
height: 100vh;
box-sizing: border-box;
}
.row {
display: table;
height: 100%;
}
.column {
padding: 5px;
display: table-cell;
vertical-align: middle;
}
.column img {
width: 400px;
}
<div class="page">
<div class="row">
<div class="column">
<img src="https://68.media.tumblr.com/94a2f217cbd0e1d3ae663764bfa3bef3/tumblr_oazuptRyRh1uz08p6o1_1280.jpg" width="100%" />
</div>
<div class="column">
<img src="http://static.tumblr.com/vbfmte2/gRAo4t8mm/icymi_03.png" width="100%" />
</div>
<div class="column">
<img src="http://static.tumblr.com/vbfmte2/QNbo4t8mh/moving_01.png" width="100%" />
</div>
<div class="column">
<img src="https://68.media.tumblr.com/94a2f217cbd0e1d3ae663764bfa3bef3/tumblr_oazuptRyRh1uz08p6o1_1280.jpg" width="100%" />
</div>
<div class="column">
<img src="http://static.tumblr.com/vbfmte2/gRAo4t8mm/image082.png" width="100%" />
</div>
<div class="column">
<img src="http://static.tumblr.com/vbfmte2/QNbo4t8mh/image257.png" width="100%" />
</div>
</div>
</div>
使用flex可能是:
body {
margin: 0;
padding: 0;
}
.row {
display: flex;
align-items:center;
min-height:100vh;
box-sizing:border-box;
}
.column {
padding: 5px;
min-width: 400px;
}
<div class="page">
<div class="row">
<div class="column">
<img src="https://68.media.tumblr.com/94a2f217cbd0e1d3ae663764bfa3bef3/tumblr_oazuptRyRh1uz08p6o1_1280.jpg" width="100%" />
</div>
<div class="column">
<img src="http://static.tumblr.com/vbfmte2/gRAo4t8mm/icymi_03.png" width="100%" />
</div>
<div class="column">
<img src="http://static.tumblr.com/vbfmte2/QNbo4t8mh/moving_01.png" width="100%" />
</div>
<div class="column">
<img src="https://68.media.tumblr.com/94a2f217cbd0e1d3ae663764bfa3bef3/tumblr_oazuptRyRh1uz08p6o1_1280.jpg" width="100%" />
</div>
<div class="column">
<img src="http://static.tumblr.com/vbfmte2/gRAo4t8mm/image082.png" width="100%" />
</div>
<div class="column">
<img src="http://static.tumblr.com/vbfmte2/QNbo4t8mh/image257.png" width="100%" />
</div>
</div>
</div>