使用display：table水平和垂直居中显示多个图像

Question

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

＆＃13;

＆＃13;

.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%;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Jsfiddle here if you prefer.

这接近我的目标，但希望能够控制每个图像之间的间距大小，使其始终是固定的数量 - 表格单元格比其中的图像更宽这是因为根据屏幕尺寸，差距会大于它应该是：

＆＃13;

＆＃13;

.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;

}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Jsfiddle here

正如您可以看到图像之间的间距变化 - 我想将其设置为可控量。表格单元格大小目前大于我想要防止的图像本身。

谢谢，

Answer 1

＆＃13;

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 2

您可以将相对单位（%）与transform 属性一起使用：

＆＃13;

＆＃13;

body {margin: 0}

.slider-container {
  position: fixed;
  left: 50%; /* moved right by 50% */
  top: 50%; /* moved down by 50% */
  transform: translate(-50%,-50%); /* moved left and up by 50% of its w/h to achieve the perfect center */
}

.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;
}

.third {
  display: table-cell;
  width: 33.33%; /* modified for accuracy */
  height: inherit;
  vertical-align: middle;
  text-align: center;
}

.third > img { /* modified */
  display: block; /* removes bottom margin/whitespace */
  max-width: 100%;
  max-height: 100vh; /* modified, vertical responsiveness */
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 3

我建议稍微简化一下结构，如下图所示：只需要有一个表格和一个内部有三个图像的单元格（不需要行），并像你一样将单元格的内容居中。为了避免图像之间的任何空间，我为单元格添加了font-size: 0：

.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;
  font-size: 0;
}

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

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