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>

Answer 2

我想你想在中间对齐图像以匹配文字。您可以float img并编辑其position以进行像素完美对齐。

此外，您使用了大量不必要的包装器，所有这些都可以简化为以下内容：

＆＃13;

#myHeading img {
  float:left;
  margin-right:10px;
  position: relative;
  top:2px;
}

＆＃13;

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

＆＃13;

Answer 3

也可以使用内联块来实现。

img, h1{
  display: inline-block;
  vertical-align: middle;
}

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

放置H1左侧的图标

3 个答案: