垂直对齐块级元素

Question

我在一个div中有一张图片和一段文字并排放置。我想要将文字垂直居中对齐，但它始终停留在顶部。请帮忙！

http://jsfiddle.net/9KDva/

HTML:

<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;
}

- Jaeeun Lee

---

可能是重复的问题：CSS垂直居中不起作用 - steveax

此链接将有助于理解垂直对齐方式 http://www.impressivewebs.com/difference-block-inline-css/ - ejaenv

Answer 1

你可以使用table和table-cell，并将class='title'移动到img-holder内。

Fiddle

如果要使image左侧没有间距，请参考此示例。

.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;  
}

- JunM

---

由于问题是如何对齐一个块，将显示更改为table-cell并不能帮助任何试图垂直对齐具有display block的元素的人。如果你愿意改变显示，不妨使用flex对齐。 - Logan Cundiff

Answer 2

我将您的div更改为span，以使vertical-align: middle生效。

请参见Fiddle：http://jsfiddle.net/9KDva/4/

CSS：

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

HTML：

<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>

- jellyfication

Answer 3

在 div 上使用 vertical-align: middle 是不起作用的。

可以尝试以下方法：

<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>

- Suchan Lee

---

表格应该仅用于表格内容，而非用于布局！ - IBBoard