我想弄清楚如何使一系列图像在页面上垂直对齐,以便人们可以左右滚动并查看它们。我尝试过'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的浏览器来说还可以。今天,在这种情况下gridflex可以做类似的工作。在整个页面中播放摘要以查看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>

08-25 11:27
查看更多