如何在CSS Grid中居中图片？如何实现图片左对齐垂直居中、文字居右？

嘿，我来帮你搞定这两个CSS布局问题，一步步说清楚哈～

其实分两种场景，咱们分别说：

• 场景一：图片是Grid容器的直接子元素
  最简单的方法是给Grid容器设置place-items: center——这是align-items（垂直居中）和justify-items（水平居中）的简写，一步到位。示例代码：

  .grid-container {
    display: grid;
    place-items: center; /* 同时控制水平+垂直居中 */
    width: 400px;
    height: 300px;
    border: 1px solid #eee;
  }
  

  对应的HTML：

  <div class="grid-container">
    <img src="http://placehold.it/350x150.png" alt="示例图片">
  </div>
  

• 场景二：图片在Grid项目的内部
  如果图片包在一个Grid项目（比如<div>）里，那给这个项目也设置Grid布局，再用place-items: center就行，当然用Flex也能实现，但既然咱们聊Grid，就用Grid的方式：

  .grid-container {
    display: grid;
    grid-template-columns: 1fr;
    width: 400px;
    height: 300px;
    border: 1px solid #eee;
  }
  .grid-item {
    display: grid;
    place-items: center;
    background: #f8f8f8;
  }
  

  HTML：

  <div class="grid-container">
    <div class="grid-item">
      <img src="http://placehold.it/350x150.png" alt="示例图片">
    </div>
  </div>
  

看你给的现有代码，咱们直接在这个基础上修改就行，核心是给每个pricing1box-div内部用Grid来排列图片和文字，比用float更稳定：

修改后的CSS代码 #

.pricing1box {
  display: grid;
  grid-template-columns: repeat(auto-fit, 300px);
  color: #444;
  margin-top: 150px;
  justify-content: center;
  gap: 20px; /* 加个项目间距，看起来更舒服 */
}
.pricing1box-div {
  background-color: orange;
  color: #fff;
  border-radius: 5px;
  font-size: 150%;
  /* 关键：给项目内部设置Grid布局 */
  display: grid;
  grid-template-columns: 100px 1fr; /* 图片列固定100px，文字列占剩余空间 */
  align-items: center; /* 让图片和文字垂直居中对齐 */
  padding: 15px; /* 加内边距，避免内容贴容器边缘 */
}
/* 去掉原来的float，Grid不需要浮动来排列元素 */
.pricing1box-div img {
  width: 100px;
  border-radius: 4px; /* 可选：给图片加个圆角，更美观 */
}
/* 给文字加个左边距，和图片拉开距离 */
.pricing1box-text {
  margin-left: 15px;
}

修改后的HTML代码 #

<div class="pricing1box">
  <div class="pricing1box-div">
    <img src="http://placehold.it/350x150.png" alt="服务图标">
    <div class="pricing1box-text">
      这里是你的定价文字内容，比如基础套餐、服务介绍之类的，现在会在图片右侧垂直居中显示啦
    </div>
  </div>
  <!-- 可以复制多个这样的div，展示不同的定价项 -->
  <div class="pricing1box-div">
    <img src="http://placehold.it/350x150.png" alt="服务图标">
    <div class="pricing1box-text">
      进阶套餐：包含更多功能，性价比拉满～
    </div>
  </div>
</div>

这样修改后，每个定价卡片里的图片都会在左侧垂直居中，文字在右侧对齐，而且布局非常稳定，不会出现浮动带来的各种问题～

内容的提问来源于stack exchange，提问作者zac