html - 使用显示 : table 将多个图像水平和垂直居中

Question

因此，使用 display: table; 技术，我将单个图像居中。示例中这个单一图像所表现出的行为对我来说是完美的；只有我还想允许多个肖像图像在容器中并排居中并以完全相同的方式居中。

.slider-container {
  left: 75px;
  right: 75px;
  position: fixed;
  top: 75px;
  height: calc(100vh - 150px);
}

.slider-container .table {
  display: table;
  height: inherit;
  width: 100%
}

.slider-container .table .col {
  display: table-cell;
  width: 100%;
  height: inherit;
  vertical-align: middle;
  text-align: center
}

.slider-container .table .col img {
  max-height: 100%;
  max-width: 100%;
}

<div class="slider-container">
  <div class="table">
    <div class="col">
      <img src="https://www.top-windows-tutorials.com/images/2013/04/2014-03-Windows-Xp-Bliss-wallpaper.jpg">
    </div>
  </div>
</div>

Jsfiddle here if you prefer.

这接近我的目标，但我希望能够控制每个图像之间的间距大小，以便它始终是一个固定的量——此时表格单元格比其中的图像宽这会导致间隙比应有的更大，具体取决于屏幕尺寸:

.slider-container {
  left: 75px;
  right: 75px;
  position: fixed;
  top: 75px;
  height: calc(100vh - 150px);
}

.slider-container .table {
  display: table;
  height: inherit;
  width: 100%
}

.slider-container .table .row {
  display: table-row;
  width: 100%;
  height: inherit;
  vertical-align: middle;
  text-align: center;
}

.slider-container .table .row .cell {
  display: table-cell;
  width: 33%;
  height: inherit;
  vertical-align: middle;
  font-size: 0;
  padding-right: 15px;
  padding-left: 15px;
}

.slider-container .table .row .cell img {
  max-height: 100%;
  max-width: 100%;
}

.left-cell {
  text-align: right;

}

.middle-cell {
  text-align: center;

}

.right-cell {
  text-align: left;

}

<div class="slider-container">
  <div class="table">
    <div class="row">
      <div class="cell left-cell"><img src="https://cosmic-s3.imgix.net/f1ed4d70-f2db-11e7-bf63-ff4a4a43daf9-Screen%20Shot%202018-01-06%20at%2012.19.20.png"></div>
      <div class="cell middle-cell"><img src="https://cosmic-s3.imgix.net/f1ed4d70-f2db-11e7-bf63-ff4a4a43daf9-Screen%20Shot%202018-01-06%20at%2012.19.20.png"></div>
      <div class="cell right-cell"><img src="https://cosmic-s3.imgix.net/f1ed4d70-f2db-11e7-bf63-ff4a4a43daf9-Screen%20Shot%202018-01-06%20at%2012.19.20.png"></div>
    </div>
  </div>
</div>

Jsfiddle here

如您所见，图像之间的间距会发生变化——我想将其设置为一个可控的量。表格单元格大小当前大于我想要防止的图像本身。

谢谢，

Answer 1

.slider-container {
  left: 75px;
  right: 75px;
  position: fixed;
  top: 75px;
  height: calc(100vh - 150px);
}

.slider-container .table {
  display: table;
  height: inherit;
  width: 100%
}

.slider-container .table .col {
  display: table-row;
  width: 100%;
  height: inherit;
  vertical-align: middle;
  text-align: center;
}

.slider-container .table .col img {
  max-height: 100%;
  max-width: 100%;
}

.third {
  display: table-cell;
  width: 33%;
  height: inherit;
  vertical-align: middle;
  text-align: center;
}

<div class="slider-container">
  <div class="table">
    <div class="col">
      <div class="third"><img src="https://cosmic-s3.imgix.net/f1ed4d70-f2db-11e7-bf63-ff4a4a43daf9-Screen%20Shot%202018-01-06%20at%2012.19.20.png"></div>
      <div class="third"><img src="https://cosmic-s3.imgix.net/f1ed4d70-f2db-11e7-bf63-ff4a4a43daf9-Screen%20Shot%202018-01-06%20at%2012.19.20.png"></div>
      <div class="third"><img src="https://cosmic-s3.imgix.net/f1ed4d70-f2db-11e7-bf63-ff4a4a43daf9-Screen%20Shot%202018-01-06%20at%2012.19.20.png"></div>
    </div>
  </div>
</div>