gpt4 book ai didi

html - 将图标放在 H1 左侧

转载 作者:太空宇宙 更新时间:2023-11-03 19:44:38 28 4
gpt4 key购买 nike

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

<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>

最佳答案

使用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>

关于html - 将图标放在 H1 左侧,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36164309/

28 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com