Question

考虑到图像的高度，是否可以将图像居中在div中。

HTML

<div class="holder">
    <h3>Article 1</h3>
    <div class="tl">
        <img src="http://placehold.it/144x70"/>
    </div>
    <p>Text 1</p>
    <p>Text 2</p>
    <div class="foot">
        <h4>Author</h4>
    </div>
</div>

<div class="holder">
    <h3>Article 2</h3>
    <div class="tl">
        <img src="http://placehold.it/144x50"/>
    </div>
    <p>Text 1</p>
    <p>Text 2</p>
    <div class="foot">
        <h4>Author</h4>
    </div>
</div>

<div class="holder">
    <h3>Article 3</h3>
    <div class="tl">
        <img src="http://placehold.it/100x15"/>
    </div>
    <p>Text 1</p>
    <p>Text 2</p>
    <div class="foot">
        <h4>Author</h4>
    </div>
</div>

CSS：

.holder {
    width: 144px;
    height: 215px;
    float: left;
    margin: 10px 10px 50px 10px;
    padding: 2px;
    border: 1px solid #000;
    position: relative;
}

h3 {
    margin: 4px 0 20px 0;
}

h4, p{
    margin: 0;
}

h3, h4, p {
    text-align: center;
}

.tl {
    text-align: center;
    height: 100px;
    position: relative;
    top: 12%;
    transform: translateY(-12%);
}

p {
    padding: 0 3px;
    line-height: 18px;
}

.foot {
    width: 144px;
    position: absolute;
    top: 197px;
}

我在这里制作了一个jsfiddle：https://jsfiddle.net/abn94Ldo/1/

我希望所有图像的中心点对齐，以便每个img占位符（144x70等）中的文本排成一行。

example

Answer 1

你可以通过两种方法实现这一点[顺便删除.tl div的顶值]，

制作img position:absolute并将所有边都设为0和margin:auto。

img{
    position:absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    margin:auto;
}

请参阅jsfiddle Link

将tl设为display:table;并添加一个display:table-row的孩子和另一个display:table-cell的孩子;现在，您可以使用vertical-align: middle;

请参阅jsfiddle Link

Answer 2

我会使用转换：

img {
position: relative;
top: 50%; // vertical placement according to preference
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}

https://jsfiddle.net/draquL3p/

绝对定位和表格布局看起来都有点hacky（虽然常用）。我自己的选择是仅在需要遗留浏览器支持时才使用它们。

Answer 3

在中间使用定位对齐图像。 Demo

.tl img{
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
}

Answer 4

试试这个： https://jsfiddle.net/abn94Ldo/3/

.tl {
       vertical-align: middle;
       display: table-cell;
       text-align: center;
       margin-bottom: 30px;
       height: 70px;
       position: relative;
       top: 12%;
       transform: translateY(-12%);
       width: 144px;
       margin: 0 auto;
}

考虑到img高度，将img居中

4 个答案: