Question

<body>
  <div id="banner">
     <img id="img1" src="leftimage.gif" alt="" width="" id="headImg" />
      <p id="myText">First Line of Text here
              <br />
              Second Line of Text here
      </p>
     <img id="img2" src="rightimage.gif" alt="" width="" id="headImg2" />
</div>

。。。更多东西在这里

在CSS中我有浮动：左边是img1。在img2上我有浮动：对;并向左清除;

我已经玩了好几个小时而没有成功。我想用CSS做的是垂直居中这两个图像之间的文本。我也想把它放在左边的图像上，可能还有几个像素。另外，我希望能够设置两行文本中每一行的字体大小和其他属性（粗体，颜色等）。

有人可以让我走上正轨吗？我尝试的几乎所有内容都将文本完全放在横幅div下。我错过了什么？

感谢。

Answer 1

如果将p标签放在图像之后，它会在图像之间浮动，您可以相应地对其进行定位。你不需要清楚：在右边的图像上留下，并记住你只能在一个元素上有一个id属性，而不是两个。图像在代码中有两个ID，因此我删除了一个。

<div id="banner">
<img id="img1" src="leftimage.gif" alt=""/>
<img id="img2" src="rightimage.gif" alt="" />
<p id="myText">First Line of Text here
          <br />
          Second Line of Text here
</p>
</div>

#img1{
float:left;
}

#img2{
float:right;
}

你可以在这里看到这个：http://jsfiddle.net/duq6R/

Answer 2

首先，您需要删除图像和段落上的浮动。

其次，您需要制作图像和段落display:inline-block;。现在，您可以使用vertical-align: middle;来达到预期的效果。

#banner {
    overflow: hidden; /*this is a cheap clearfix*/
    text-align: center;
}
#banner img, p {
    display: inline-block;
    vertical-align: middle;
}

See this JS Fiddle

在两个图像之间垂直居中两行文本

2 个答案: