这是我的代码:
<div id="banner">
<h1 class="title">Sam Clark</h1> <img src="Images/twitter.png" width="35" height="35" alt="Twitter" id="twitter-img" />
</div>
图像显示在一个新行上...我该如何阻止它? 顺便说一句,我刚刚意识到我不需要它水平居中...抱歉。
最佳答案
安<h1>
element 是一个 block 级元素,这意味着它会默认占据输入宽度。如果您希望图像与文本显示在同一行,您需要在元素内定义它,并与文本一起定义。
<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;
}
关于html - 图像不会显示在文本旁边,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10606524/