Flexbox不会浮动到中心

使用包含6个<div>的容器。我可以将它们放置在容器的中心，但不会流到中间，文字位于下方。Flexbox不会浮动到中心

希望能得到所有帮助。

.services { 
 
    display: flex; 
 
    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>

来源

2017-02-25 Sander Hellesø

你可能会误以为这些alignement规则：对齐项，*垂直当'弯曲方向：row'，水平时'flex-方向：column' *和justify-content *当'flex-direction：row'时为水平，'flex-direction：column'时为垂直* - 看看是否还没有https://css-tricks.com/snippets/css/ a-guide-to-flexbox/ –

你的问题非常不明显，应该以什么为中心，以及如何 – LGSon

说明：

为什么你的解决方案没有工作是因为你只是对准项目的原因。而您需要调整内容并将内容证明为中心。此外，我已经在列中添加了弯曲方向，因为您的项目都在另一个之下 - 当您想稍后调整时，它将有助于提高响应能力。

请尝试以下：

.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>

来源

2017-02-25 11:20:01 jagmitg

Flexbox不会浮动到中心

回答

相关问题