时间戳

首页 > 解决方案 > 在 CSS 中将子块定位在父块的中心

html - 在 CSS 中将子块定位在父块的中心

问题描述

我有一个父母，它有我使用 display: flex 分发的带有文本的图标，但现在问题是。如何在父级中心制作带有图标的块？我尝试了在 Internet 上找到的不同方法，但由于 display: flex，它们无法按照我的理解工作

.icons {
  margin: auto 250px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}
<div class="service">
  <div class="icons">
    <img src="#">
    <img src="#">
    <img src="#">
  </div>
</div>

标签： htmlcss

解决方案

您的 CSS 值justify-content: space-between;在中心对齐时是错误的。

.icons {
  margin: auto 250px;
  display: flex;
  flex-direction: row;
  justify-content: center; /* you gave this wrong value */
  align-items: center;
}


/* Demo */

img {
  border: 1px solid #000;
}

.service {
  border: 1px solid red;
}
<div class="service">
  <div class="icons">
    <img src="https://via.placeholder.com/150" alt="">
    <img src="https://via.placeholder.com/150" alt="">
    <img src="https://via.placeholder.com/150" alt="">
  </div>
</div>

推荐阅读