HTML:调整 br 元素之间的高度

Question

在给定的 fiddle 中，我希望第一个单词与图像顶部对齐，第二个单词与图像底部对齐。 http://jsfiddle.net/himanshuy/W6ATN/15/

我已经为 span 尝试了 line-height ，为 br 元素尝试了 margin 但似乎什么都没有工作。

Answer 1

我重新安排了您的一些 html。首先，我将 img 元素和两个 span 元素放在它们自己的 div 中。所以有两个内联div。我还为其中一个跨度添加了样式。您可以在此处查看最终结果:http://jsfiddle.net/W6ATN/17/

如果 fiddle 失败，这里是标记:

html

<div class="box">
 <div class="logo">
  <div class="inlineDiv">
   <img src="c:\work\img\logo3.jpg" width="80" height="80" />
  </div>
  <div class="inlineDiv">
      <span class="spanTop">YAD</span>
      <span>HIM</span>
  </div>
 </div>
</div>​

CSS

div.box {
  background-color: #000000;
  color: #FFFFFF;
  width: 300px;
  height: 400px;
  text-align: center;    
}

img {
margin-top:20px;
}

.inlineDiv
{
 display:inline;
}

.spanTop
{
 margin-top:10px;
 position:absolute;
}

span {
 font-size: 30px;
 color: red;
 clear:both;
 line-height:45px;
}