考虑到img高度,将img居中

时间:2015-04-16 10:24:33

标签: html css layout

考虑到图像的高度,是否可以将图像居中在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

4 个答案:

答案 0 :(得分:3)

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

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

    img{
        position:absolute;
        top: 0px;
        left: 0px;
        right: 0px;
        bottom: 0px;
        margin:auto;
    }
    
  2. 请参阅jsfiddle Link

    1. 将tl设为display:table;并添加一个display:table-row的孩子和另一个display:table-cell的孩子;现在,您可以使用vertical-align: middle;
    2. 制作图像位置中心

      请参阅jsfiddle Link

答案 1 :(得分:2)

我会使用转换:

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

https://jsfiddle.net/draquL3p/

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

答案 2 :(得分:0)

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

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

答案 3 :(得分:0)

试试这个: 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;
}