我有一个4x11的网格,我试图将图像和标题放在同一区域内。目前,图片位于文字上方,而不是与文字对齐的左侧:
<div class="Time">
<figure class = "Time-icon">
<img src="/images/time.png" alt="time icon" width= "20%" height= "20%">
</figure>
<h2>Time</h2>
</div>
.time {
grid-area: 10 / 3 / 12 / 4;
align-items: center;
padding-left: 85px;
}
.time-icon{
float: left;
display: block;
}
我将如何使图标恰好位于文本的左侧?
我想你可以用这个css
。
.time {
display: flex;
justify-content: center;
align-items: center;
}
.time-icon {
margin: 0 8px 0 0;
width: 20%;
height: 20%;
}
.time-icon img {
width: 100%;
height: 100%;
}
的HTML
<div class="time">
<figure class = "time-icon">
<img src="/images/time.png" alt="time icon">
</figure>
<h2>Time</h2>
</div>
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句