Html 如何将图像与标题元素并排对齐？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/29504632/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to align an image side by side with a heading element?
提问by Coolguy
below is my code:
下面是我的代码：
<div><img src="images/ConfigIcon.png"/><h1>System Configuration</h1></div>
I want to make the image appear beside my h1 header. But what I get is that the image is always at top of my header. Any ideas?
我想让图像出现在我的 h1 标题旁边。但我得到的是图像总是在我的标题顶部。有任何想法吗？
回答by Stickers
<h1>is a block-level element, and browsers typically display the block-level element with a newline both before and after the element. However you can make it as inlineor inline-block
<h1>是一个块级元素，浏览器通常在元素前后显示带有换行符的块级元素。但是，您可以将其设为inline或inline-block
h1 {
display: inline;
}<div><img src="images/ConfigIcon.png"/><h1>System Configuration</h1></div>回答by jessegavin
There are soooo many ways to do this.
有很多方法可以做到这一点。
Some of these methods are reallygross and should be avoided, but I thought it would be interesting to list them out for the sake of illustration.
其中一些方法非常粗暴，应该避免，但我认为为了说明起见将它们列出来会很有趣。
Use the alignproperty on the <img>.
使用 上的align属性<img>。
<div><img src="images/ConfigIcon.png" align="left"/><h1>System Configuration</h1></div>
Nest the <img>inside the <h1>.
嵌套<img>在<h1>.
<div>
<h1><img src="images/ConfigIcon.png" /> System Configuration</h1>
</div>
Use an inline style to floatthe <h1>.
使用内嵌样式float的<h1>。
<div>
<img src="images/ConfigIcon.png"/>
<h1 style="float: right">System Configuration</h1>
</div>
Use an inline style to floatthe <img>.
使用内嵌样式float的<img>。
<div>
<img src="images/ConfigIcon.png" style="float: left"/>
<h1>System Configuration</h1>
</div>
Use inline styles to make both <img>and <h1>display as inlineelements.
使用内联样式，以使双方<img>并<h1>显示为inline元素。
<div>
<img src="images/ConfigIcon.png" style="display: inline" />
<h1 style="display: inline">System Configuration</h1>
</div>
Use inline styles to make both <img>and <h1>display as inline-blockelements.
使用内联样式，以使双方<img>并<h1>显示为inline-block元素。
<div>
<img src="images/ConfigIcon.png" style="display: inline-block" />
<h1 style="display: inline-block">System Configuration</h1>
</div>
Use css background-image property and some padding.
使用 css background-image 属性和一些填充。
The following example assumes you have a 16x16 px icon image.
以下示例假设您有一个 16x16 像素的图标图像。
<div>
<h1 style="background: url(images/ConfigIcon.png) 0 50% no-repeat;padding-left: 16px">System Configuration</h1>
</div>
And many more...
还有很多...
