Question

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

我已尝试line-height span和margin br元素，但似乎没有任何效果。

Answer 1

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

如果小提琴失败，这里是标记：

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

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

1 个答案: