Question

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

Answer 1

您可以使用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; } - fiddle

{{1}}

Answer 2

我将您的div更改为vertical-align: middle的工作范围。

请参阅小提琴：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>

Answer 3

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

垂直对齐块元素

3 个答案: