Question

处理包含6 <div>的容器。我可以将它们放置在容器的中心，但不会流到中间，文本位于下方..

非常感谢我能得到的所有帮助。

＆＃13;

.services {
  display: flex;
  align-items: center;
}

＆＃13;

<div class="subSection services">
  <div class="box">
    <img src="img/icon1.png">
    <h3>ICON 1</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus mi augue, viverra sit amet ultricies</p>
  </div>
  <div class="box">
    <img src="img/icon2.png">
    <h3>ICON 2</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus mi augue, viverra sit amet ultricies</p>
  </div>
  <div class="box">
    <img src="img/icon3.png">
    <h3>ICON 3</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus mi augue, viverra sit amet ultricies</p>
  </div>
  <div class="box">
    <img src="img/icon4.png">
    <h3>ICON 4</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus mi augue, viverra sit amet ultricies</p>
  </div>
  <div class="box">
    <img src="img/icon5.png">
    <h3>ICON 5</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus mi augue, viverra sit amet ultricies</p>
  </div>
  <div class="box">
    <img src="img/icon6.png">
    <h3>ICON 6</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus mi augue, viverra sit amet ultricies</p>
  </div>
</div>

＆＃13;

Answer 1

<强>解释：

你解决方案之所以不起作用，是因为你只是在调整项目。而您需要调整内容并将内容合理化为中心。此外，我已经在列中添加了弹性方向，因为您的项目都在另一个之下 - 当您想稍后调整它时，它将有助于响应性。

请尝试以下：

.services{
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-flex-wrap: nowrap;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-align-content: center;
    -ms-flex-line-pack: center;
    align-content: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
}

<div class="subSection services">
  <div class="box">
    <img src="img/icon1.png">
    <h3>ICON 1</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus mi augue, viverra sit amet ultricies</p>
  </div>
  <div class="box">
    <img src="img/icon2.png">
    <h3>ICON 2</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus mi augue, viverra sit amet ultricies</p>
  </div>
  <div class="box">
    <img src="img/icon3.png">
    <h3>ICON 3</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus mi augue, viverra sit amet ultricies</p>
  </div>
  <div class="box">
    <img src="img/icon4.png">
    <h3>ICON 4</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus mi augue, viverra sit amet ultricies</p>
  </div>
  <div class="box">
    <img src="img/icon5.png">
    <h3>ICON 5</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus mi augue, viverra sit amet ultricies</p>
  </div>
  <div class="box">
    <img src="img/icon6.png">
    <h3>ICON 6</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus mi augue, viverra sit amet ultricies</p>
  </div>
</div>

Flexbox不会漂浮到中心位置

1 个答案: