0

这是我的代码：

<div id="banner">
  <h1 class="title">Sam Clark</h1> <img src="Images/twitter.png" width="35" height="35" alt="Twitter" id="twitter-img" />
  </div>

图像显示在新行上...我该如何阻止它？顺便说一句，我刚刚意识到我不需要它水平居中......对不起。

4

3 回答 3

2

<h1>元素是块级元素，这意味着它会默认占用输入宽度。如果您希望图像与文本显示在同一行，您需要在元素内定义它，与文本一起。

<h1 align="center" class="title">
    Sam Clark <img src="Images/twitter.png" width="35" height="35" alt="Twitter" id="twitter-img" />
</h1>

如果您尝试将图像向左或向右浮动，则需要在元素之前定义它。<h1>

经过一番尝试，我找到了一种方法，使图像旁边的文本垂直居中，同时保持标题本身内文本的水平居中，但它涉及添加一个额外的（非语义）元素。

<h1 class="title">
    <span><img src="Images/twitter.png" width="35" height="35" alt="Twitter" id="twitter-img" /> Sam Clark</span>
</h1>

h1.title {
    text-align: center;
}
h1.title span {
    display: inline-block;
    line-height: 35px;
}
h1.title span img {
    float: right;
    margin-left: 7px;
}

请参阅 jsFiddle。

于 2012-05-15T18:18:04.337 回答
0

h1默认情况下显示display为block. 要更改这一点，请使用此 CSS：

#banner .h1 {
    display: inline;
}
于 2012-05-15T18:17:33.037 回答
0

<h1>元素是块级元素。您可以选择非块级元素（例如<span>）或更改<h1>元素的样式并设置display:inline;。

前任：

#banner h1.title {
    display: inline;
}

另一种选择是将图像放在<h1>标签内，然后将图像的垂直对齐属性设置为中间。

<div id="banner">
  <h1 align="center" class="title">Sam Clark <img src="Images/twitter.png" width="35" height="35" alt="Twitter" id="twitter-img" style="vertical-align:middle" /></h1>
</div>​
于 2012-05-15T18:17:50.610 回答