我在一个 div 中有一个图像和一个文本并排放置。我试图将文本在中间垂直对齐,但它保持在顶部。请帮忙!
HTML:
<div class="title-block">
<div class="img-holder"><img width="101" height="104" src="http://www.girlsguidetomanners.com/wp-content/uploads/2014/02/url-16-101x104.jpeg" class="attachment-homepoststhumbnail wp-post-image" alt="url-16" /></div>
<div class="title">Get Your Nose Out of Your IPhone</div>
</div>
CSS:
.title-block {
width:272px;
height: 110px;
vertical-align:middle;
}
.img-holder {
float: left;
margin: 0 6px 0 0;
position: relative;
}
.img-holder img {
display: block;
}
.title {
display:block;
text-transform: uppercase;
margin: 8px 0 9px;
}
最佳答案
您可以使用table
和table-cell
:并将您的class='title'
移到img-holder
image
留有填充 - fiddle
.title-block {
width:272px;
height: 110px;
}
.img-holder {
margin: 0 6px 0 0;
position: relative;
display: table;
}
img, .title{
display:table-cell;
vertical-align: middle;
}
.title {
text-transform: uppercase;
margin: 8px 0 9px;
}
关于css - 垂直对齐 block 元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22109450/