Question

我想要做的是将img元素垂直和水平放置在img容器中。 img-container需要是父元素的％，而不是固定宽度。（即外容器可能不总是1000px）

尽管下面的代码使用img-container对图像进行了精确定位，但img-continer的宽度似乎忽略了CSS宽度20％。即我无法获得img容器以获得正确的宽度（在这种情况下为200px）。

有什么建议吗？ -Matt。

这是我的CSS

#outer-container{
  width:1000px;
}
.img-container {
  height:20vh;
  width:20%;
  vertical-align:middle;
  display: table-cell;
}
.centred-img {
  display:block;
  margin-left:auto;
  margin-right:auto;
  max-height:100%;
  max-width:100%;
}

这是我的HTML：

<div id="outer-container">
  <div class="img-container">
    <img class="centred-img" src="1.jpg">
  </div>
  <div class="img-container">
    <img class="centred-img" src="2.jpg">
  </div>
  <div class="img-container">
    <img class="centred-img" src="3.jpg">
  </div>
  <div class="img-container">
    <img class="centred-img" src="4.jpg">
  </div>
</div>

Answer 1

对子元素使用display:inline-block，并在父元素上使用text-align:center。这应该是水平居中的技巧。要使其垂直居中，您需要将line-height添加到您的图片父级，vertical-align:middle添加到图像本身。

尝试使用此CSS .

#outer-container{
  width:500px;
  border:1px solid black;
}
.img-container {
  height:20vh;
  width:20%;
  display: inline-block;
  border:1px solid black;
  line-height:20vh;
  text-align: center;
}
.centred-img {
  vertical-align:middle;
  margin-left:auto;
  margin-right:auto;
  max-height:100%;
  max-width:100%;
}

Answer 2

这是我使用css表的小提琴。这是你在找什么？高度和宽度都是动态的。

http://jsfiddle.net/sinnix/dpppzuds/

<div class="container">
    <div class="row">
        <div class="cell">
            <img src="http://placehold.it/50">
        </div>
        <div class="cell">
            <img src="http://placehold.it/50">
        </div>
        <div class="cell">
            <img src="http://placehold.it/50">
        </div>
        <div class="cell">
            <img src="http://placehold.it/50">
        </div>
    </div>
</div>

.container {
    display: table;
    width: 90%; /* adjust as desired */
    height: 100px;
}

.row {
    display: table-row;
}

.cell {
    display: table-cell;
    width: 25%;
    background: magenta;
    vertical-align: middle;
    text-align: center;
}

.cell:nth-child(even){
    background: yellow;
}

在未知大小的父容器中居中和间隔图像

2 个答案: