Question

我有一个有2个孩子的容器。第一个孩子是一个图标，第二个是文本。我想仅使用Flexbox对齐左侧图标和标题中心。

HTML代码和CSS代码：

.container {
  display: flex;
  background-color: #7D8F99;
  width: 100%;
  height: 50px;
}

.title {
  display: flex;
  background-color: #9AADB8;
}

.icon {
  display: flex;
  background-color: #1AADA9;
}

<div class="container">
  <span class="icon">icon</span>
  <span class="title">text</span>
</div>

https://jsfiddle.net/eajosjoh/

Answer 1

position: absolute上left: 0和.icon的组合可以解决问题。

＆＃13;

.container {
  display: flex;
  justify-content: space-around;
  background-color: #7D8F99;
  width: 100%;
  height: 50px;
  position: relative;
}

.title {
  background-color: #9AADB8;
}

.icon {
  background-color: #1AADA9;
  position: absolute;
  left: 0;
}

＆＃13;

<div class="container">
  <span class="icon">icon</span>
  <span class="title">text</span>
</div>

＆＃13;

或，如果您只想使用flex，则可以在右侧添加空间隔元素。间隔元素需要具有与.icon元素相同的宽度。说实话，为布局添加一个空元素并不是一个很好的选择。所以我推荐第一种方法。

＆＃13;

.container {
  display: flex;
  justify-content: space-between;
  background-color: #7D8F99;
  width: 100%;
  height: 50px;
}

.title {
  background-color: #9AADB8;
}

.icon {
  background-color: #1AADA9;
  width: 30px;
}

.spacer {
  /* width must match icon width */
  width: 30px; 
}

＆＃13;

<div class="container">
  <span class="icon">icon</span>
  <span class="title">text</span>
  <span class="spacer"></span>
</div>

＆＃13;

Answer 2

向margin: 0 auto;添加.title将解决问题

＆＃13;

.container {
  display: flex;
  background-color: #7D8F99;
  width: 100%;
  height: 50px;
}

.title {
  display: flex;
  background-color: #9AADB8;
  margin: 0 auto;
}

.icon {
  display: flex;
  background-color: #1AADA9;
}

＆＃13;

<div class="container">
  <span class="icon">icon</span>
  <span class="title">text</span>
</div>

＆＃13;

如何使用Flexbox仅从容器中心子元素？

2 个答案: