如何以网格格式将图像和文本对齐在一起答案

【问题标题】：How to align images and text together in a grid format如何以网格格式将图像和文本对齐在一起
【发布时间】：2021-09-06 13:17:30
【问题描述】：

我有一张个人资料图片，旁边有文字。我正在尝试以这样的方式对其进行格式化，即有一个个人资料图像，旁边有一个文本，后面是网格格式。

我在 CSS 方面不是很方便，所以对齐项目并不是我的事 XD。任何帮助将不胜感激。

这是 html 代码。

  <div class="col-sm-3">
    <div class="cardearnings" style="height:89%;">
      <div class="card-body">
        <h2 class="card-title">Activity</h2>
          <div class="contents">
          <img src="https://i.kinja-img.com/gawker-media/image/upload/gd8ljenaeahpn0wslmlz.jpg" style="width:70px; height:70px;" class="image--cover"><i>Someone followed you</i>
          <img src="https://i.kinja-img.com/gawker-media/image/upload/gd8ljenaeahpn0wslmlz.jpg" style="width:70px; height:70px;" class="image--cover"><i>Me followed you</i>
        </div>
      </div>
    </div>
  </div>

这是 CSS

.image--cover {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  object-fit: cover;
  object-position: center right;
}

这是目前的样子

【问题讨论】：

标签： html css vue.js

【解决方案1】：

添加到上面的答案。我们也可以使用 CSS 的flexbox 属性来实现这样的布局。

请参考以下代码sn-ps：

 

<!DOCTYPE html>
<html>
   <head>

      <!-- CSS style -->
      <style>
         .container1 {
         display: flex;
         }
         .container2 {
         display: flex;
         }
         p {
         margin-left: 10px;
         }
         img {
         margin-top: 5px;
         }
      </style>

   </head>
   <body>

      <div class="container1">
         <img src="https://i.kinja-img.com/gawker-media/image/upload/gd8ljenaeahpn0wslmlz.jpg"
            style="width:70px; 
            height:70px;" class="image--cover">
         <p> Someone followed you </p>
      </div>

      <div class="container2">
         <img src="https://i.kinja-img.com/gawker-media/image/upload/gd8ljenaeahpn0wslmlz.jpg"
            style="width:70px; 
            height:70px;" class="image--cover">
         <p> Me followed you </p>
      </div>

   </body>
</html>

参考资料：

【讨论】：

我没有关注其他CSS属性，我只是提到了flexbox布局。您可以随时根据需要修改其他 CSS 属性。

【解决方案2】：

如果我没有理解你的话：

.card-body {
  display: grid;
  justify-items: center;
}
.contents {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 1em;
}
.image--cover {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  object-fit: cover;
  object-position: center right;
}

<div class="col-sm-3">
  <div class="cardearnings" style="height:89%;">
    <div class="card-body">
      <h2 class="card-title">Activity</h2>
      <div class="contents">
        <img src="https://i.kinja-img.com/gawker-media/image/upload/gd8ljenaeahpn0wslmlz.jpg" style="width:70px; height:70px;" class="image--cover">
        <i>Someone followed you</i>
        <img src="https://i.kinja-img.com/gawker-media/image/upload/gd8ljenaeahpn0wslmlz.jpg" style="width:70px; height:70px;" class="image--cover">
        <i>Me followed you</i>
      </div>
    </div>
  </div>
</div>

【讨论】：