Question

我已经做了一段时间，因为我已经做了一些如此基本的事情，但我不记得了。我有一个基本的两列设置。在左栏div我有文字和三个图像。每张图像高38像素。它包含在一个40像素的div中，带有一个像素边框。预先添加图像是文本“AS SEEN IN：”问题是文本在垂直中间没有正确对齐，并且位于图像的顶部或底部。以下是我当前的css和代码无法正常工作..

<style type="text/css">
div.container {
 overflow: hidden;
 width: 100%;

}

div.left {
 width: 50%;
 float: left;
 background-color:#F0F1F3;
  border: 1px solid #DEDEDE;
}

.textmiddle {vertical-align:middle;} 
div.right {
 width: 40%;
 float: right;
 background-color:#F0F1F3;
  border: 1px solid #DEDEDE;
}</style>
<div class="container">
<div class="left">
AS SEEN IN:<img class="textmiddle" border="0" src="images/gq.png">&nbsp;<img class="textmiddle" border="0" src="images/nyTimes.png"><img border="0" src="/images/vogue.png" class="textmiddle">

</div>
<div class="right">3</div>
</div>

Answer 1

您可以在一个范围中包装文本“AS SEEN IN：”并将其行高设置为等于图像的高度。

Answer 2

你的第三张图片的src中有一个额外的/它，应该说“images / vogue.png”而不是“/images/vogue.png”

除此之外，我在Chrome中打开了您的代码并且对齐得很好。 http://i.stack.imgur.com/fx3JP.png您使用的浏览器是什么？

CSS没有正确对齐

2 个答案: