考虑到图像的高度,是否可以将图像居中在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等)中的文本排成一行。
答案 0 :(得分:3)
你可以通过两种方法实现这一点[顺便删除.tl div的顶值],
制作img position:absolute
并将所有边都设为0和margin:auto
。
img{
position:absolute;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
margin:auto;
}
display:table
;并添加一个display:table-row
的孩子和另一个display:table-cell
的孩子;现在,您可以使用vertical-align: middle
; 答案 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;
}