html - 同一 Css Grid 区域中的图像和文本

Question

我有一个 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;
}

我将如何使图标与文本内嵌在左侧？

标签： htmlcsscss-grid

Answer 1

我想你可以用这个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>