css 垂直对齐块元素

vm0i2vca 于 11个月前发布在其他

关注(0)|答案(3)|浏览(105)

我有一个图像和文本在一个div中彼此相邻。我试图在中间垂直对齐文本，但它仍然在顶部。请帮助！
http://jsfiddle.net/9KDva/
超文本标记语言：

<div class="title-block">
  <div class="img-holder"><img width="101" height="104" src="http://www.test.com/test.jpeg" /></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;
}

型

css

来源：https://stackoverflow.com/questions/22109450/vertical-align-a-block-element

3条答案

按热度按时间

icomxhvb1#

您可以使用table和table-cell：并将您的class='title'移动到img-holder中
Fiddle
在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;  
}

字符串

赞(0）回复(0）举报 11个月前

46scxncf2#

我把你的div改成了span，让vertical-align: middle可以工作。
参见小提琴：http://jsfiddle.net/9KDva/4/
CSS：

.vam {
    vertical-align: middle;
}
span.vam {
    display: inline-block;
}

字符串
超文本标记语言：

<div class="title-block">
   <span class="img-holder vam">
<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" /></span>
    <span class="title vam">Get Your Nose Out of Your IPhone</span>

 </div>

型

赞(0）回复(0）举报 11个月前

nkoocmlb3#

使用vertical-align：middle在div上不起作用。
这样的东西可能会起作用：

<table class="title-block" style="background-image:url('http://www.girlsguidetomanners.com/wp-content/uploads/2014/02/url-16-101x104.jpeg); background-size: cover; background-position: center center;">
  <tr>
     <td class="title" style="vertical-align: middle;">
         Get Your Nose Out of Your IPhone
     </td>
  </tr>
</table>

字符串

赞(0）回复(0）举报 11个月前

我来回答

css 垂直对齐块元素

3条答案

相关问题

热门标签

最新问答