Div与图像垂直对齐

我知道这已被问了很多很多次，但我仍然无法完成自己想要的东西。我看过各种网站寻求帮助，如Here和Here以及使用显示表垂直对齐，行高度等Div与图像垂直对齐

这里就是我试图完成（我知道我可能要添加更多divs）。文本并不总是恒定的，所以我不能只是设置填充并完成它，因为红色和蓝色的文本可能会改变长度。

Image of my divs

下面是一个简单的jsfiddle什么我目前有：http://jsfiddle.net/gP2U8/9/

<div class="container"> 
    <div class="left"> 
     <img src="http://www.gadgets-for-men.co.uk/wp-content/themes/revolution_tech-20/images/rss-icon-50.gif" /> 
     <span>This is text below the image</span> 
    </div> 
    <div class="right"> 
     <span>This is text to the right of the image, will usualy contain a lot of text. This is text to the right of the image, will usualy contain a lot of text. This is text to the right of the image, will usualy contain a lot of text. This is text to the right of the image, will usualy contain a lot of text.</span> 
    </div> 
</div> 


.container{ 
    border: 1px solid black; 
    width: 400px; 
    height: auto; 
    position: relative; 
    display: inline-block; 
} 

.left{ 
    float:left; 
    width: 25%; 
} 

.right{ 
    float: right; 
    width: 75%; 
} 

.left, .right{ 
    margin-top: 25px; 
    margin-bottom: 25px; 
}

来源

2013-03-17 sl133

你是如此接近！只需将图片设置为display: block

http://jsfiddle.net/d4DaV/1/

来源

2013-03-17 19:08:08 MattDiamant

不完全是，如果添加更多的文字，你会看到一个问题。 http://jsfiddle.net/d4DaV/2/我希望下面的图像和文字保持垂直对齐以及 – sl133 2013-03-17 19:10:42

对齐在哪里？在中间？在底部？目前它排在最前面。 – MattDiamant 2013-03-17 19:12:25

在中间垂直对齐，以便它居中。你可以在我的模拟图像中看到，左侧将停留在右侧文本的中间。 – sl133 2013-03-17 19:12:55

可以使用display: table和display: table-cell垂直对齐。

见http://jsfiddle.net/d4DaV/3/

不会对IE6和IE7但IE8向上

来源

2013-03-17 19:21:07 Stephan

工作，不使用浮动元素。相反，使用内联元素（您可以使用vertical-align样式）与white-space: nowrap和font-size: 0粘合在一起，如this demo fiddle中所示。

标记（不变）：

<div class="container"> 
    <div class="left"></div> 
    <div class="right"></div> 
</div>

样式表：

.container{ 
    border: 1px solid black; 
    width: 400px; 
    padding: 25px 0; 
    white-space: nowrap; 
    font-size: 0; 
} 
.left, .right { 
    display: inline-block; 
    vertical-align: middle; 
    white-space: normal; 
    font-size: 12pt; 
} 
.left{ 
    width: 25%; 
} 
.right{ 
    width: 75%; 
} 
img { 
    display: block; 
}

来源

2013-03-17 20:29:53 NGLN

Div与图像垂直对齐

回答

相关问题