如何將圖像與標題元素並排對齊？

Question

下面是我的代碼：

<div><img src="images/ConfigIcon.png"/><h1>System Configuration</h1></div>

我想讓圖像出現在我的h1標題旁邊。 但我得到的是圖像始終位於我的標題之上。 有任何想法嗎？

Answer 1

<h1>是塊級元素 ，瀏覽器通常在元素之前和之后顯示帶有換行符的塊級元素。 但是，您可以將其設置為inline或inline-block

 h1 { display: inline; } 

 <div><img src="images/ConfigIcon.png"/><h1>System Configuration</h1></div> 

Answer 2

有很多方法可以做到這一點。

其中一些方法確實很嚴重，應該避免使用，但我認為為了說明的目的列出它們會很有趣。

使用<img>上的align屬性。

<div><img src="images/ConfigIcon.png" align="left"/><h1>System Configuration</h1></div>

將<img>嵌套在<h1> 。

<div>
  <h1><img src="images/ConfigIcon.png" /> System Configuration</h1>
</div>

使用內聯樣式float <h1> 。

<div>
  <img src="images/ConfigIcon.png"/>
  <h1 style="float: right">System Configuration</h1>
</div>

使用內聯樣式float <img> 。

<div>
  <img src="images/ConfigIcon.png" style="float: left"/>
  <h1>System Configuration</h1>
</div>

使用內聯樣式使<img>和<h1>顯示為inline元素。

<div>
  <img src="images/ConfigIcon.png" style="display: inline" />
  <h1 style="display: inline">System Configuration</h1>
</div>

使用內聯樣式使<img>和<h1>顯示為inline-block元素。

<div>
  <img src="images/ConfigIcon.png" style="display: inline-block" />
  <h1 style="display: inline-block">System Configuration</h1>
</div>

使用css background-image屬性和一些填充。

以下示例假定您具有16x16像素圖標圖像。

<div>
  <h1 style="background: url(images/ConfigIcon.png) 0 50% no-repeat;padding-left: 16px">System Configuration</h1>
</div>

還有很多...