html - 将图标放在 H1 左侧

Question

我想在我的标题旁边放一个图标。但它不合适..我怎样才能让它合适？

<div style="width:100%;">
 <div style="float: left;width:7%;min-width:40px;">
   <img src="http://superfood-zentrum.info/wp-content/uploads/2016/03/square.png"  /></div>
<div style="float: left;width:93%;">
<h1>My heading</h1>
</div>
</div>

Answer 1

使用vertical-align:middle，因此如果您更改文本或图像的大小，位置会自动对齐。

.myHeading img {
    margin-right:10px;
}
.myHeading h1, .myHeading img {
    display:inline-block;
    vertical-align:middle;
}

<div class="myHeading">
    <img src="http://superfood-zentrum.info/wp-content/uploads/2016/03/square.png" />
    <h1>My heading</h1>
</div>

<div class="myHeading">
    <img height="60px" src="http://superfood-zentrum.info/wp-content/uploads/2016/03/square.png" />
    <h1>My heading</h1>
</div>

<div class="myHeading">
    <img src="http://superfood-zentrum.info/wp-content/uploads/2016/03/square.png" />
    <h1 style="font-size:70px;">My heading</h1>
</div>