[英]How to align a H1 to an image
我有这段代码,但 H1 比图像略高。 这是我可以完美内联的方式吗?
<div style="display: flex; align-items:center;"> <h1 style="margin-top: 0; margin-bottom: 0; color: #333; padding: 0.6rem;"> <img style="vertical-align: middle;" src="https://upload.wikimedia.org/wikipedia/commons/2/27/Red_square.svg" width="40" height="40" /> My Text</h1> </div>
您应该从 H1 标签的外部移动图像。 试试这个!
<div style="display: flex; align-items:center;">
<img style="vertical-align: middle;"src="https://upload.wikimedia.org/wikipedia/commons/2/27/Red_square.svg" width="40" height="40" />
<h1 style="margin-top: 0; margin-bottom: 0; color: #333; padding: 0.6rem;">My Text</h1>
</div>
h1 中的图像是问题所在。 容器 div 已经应用了您想要的正确样式。
<div style="display: flex; align-items:center;">
<img style="vertical-align: middle;" src="https://upload.wikimedia.org/wikipedia/commons/2/27/Red_square.svg" width="40" height="40" />
<h1 style="margin-top: 0; margin-bottom: 0; color: #333; padding: 0.6rem;">My Text</h1>
</div>
<figure> <img src="pic_trulli.jpg" alt="Trulli" style="width:100%"> <figcaption>Fig.1 - Trulli, Puglia, Italy.</figcaption> </figure>
使用标题沿图片对齐
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.