垂直對齊塊元素

Question

我有一個圖像和文本在div中彼此相鄰。我試圖在中間垂直對齊文本，但它保持在最上面。請幫忙！

http://jsfiddle.net/9KDva/

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

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

Answer 2

使用垂直對齊：中間會不會在一個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> 

Answer 3

我改變了你的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>