如何在 Flexbox div 中居中文本标题答案

【问题标题】：How to center text title within Flexbox div如何在 Flexbox div 中居中文本标题
【发布时间】：2017-01-29 21:26:34
【问题描述】：

我在将标题 hello world 居中时遇到问题。我希望标题位于白色白色容器内，但我希望它占据自己的行并在标题下方放置图像。我尝试通过给标题一个类并将它的显示属性更改为块的属性来解决这个问题，但这不起作用。我也尝试在外面添加一个 div 容器，但这也没有用，至少我没能让它工作。有什么建议？

编解码器：

https://codepen.io/mmartinb/pen/wzozVX

.parenttwo {
  max-width: 1000px;
  min-height: 500px;
  background-color: white;
  border-style: solid;
  border-color: green;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.item1 {
  width: 40%;
  height: 40%;
  margin: 20px;
}

<div class="parenttwo container-fluid">
  <h1 class="text-center"> Hello World</h1>
  <img src="http://www.onepagemania.com/wp-content/uploads/2014/01/Untitled-12.jpg" alt="Thumbnail1" class="item1">
  <img src="http://michaelacevedo.com/images/portfolio/sprk-crtv-branding.jpg" alt="Thumbnail1" class="item1">
  <img src="http://www.niceoneilike.com/webdesign-inspiration/1572_1_bartek.wojtyca.pl-webdesign-inspiration-website-clean-creative.jpg?m=1364289144" alt="Thumbnail1" class="item1">
  <img src="http://www.designlicks.com/uploads/licks/656x413/21084_20150316015538000000.jpg" alt="Thumbnail1" class="item1">
  <img src="http://www.niceoneilike.com/webdesign-inspiration/2294_1_madebydaryl.co.uk-webdesign-inspiration-website-clean-creative.jpg?m=1371803382" alt="Thumbnail1" class="item1">
  <img src="http://www.awwwards.com/awards/submissions/2015/07/55b88b065ec9a.jpeg" alt="Thumbnail1" class="item1">
</div>

【问题讨论】：

标签： html css flexbox center

【解决方案1】：

如果你想继续使用 flexbox，只需将标题设为 100% 宽

.parenttwo .text-center {
  width: 100%;
}

Codepen Demo

.parenttwo {
  max-width:1000px;
  min-height:500px;
  background-color: white;
  border-style: solid;
  border-color: green;
  display:flex;
  flex-wrap: wrap;
  justify-content: center;
}

.parenttwo .text-center {
  width: 100%;
}

.item1{
  width: 40%;
  height: 40%;
  margin: 20px;
}

.parentthree {
  max-width:1000px;
  min-height:500px;
  background-color: white;
  border-style: solid;
  border-color: blue;
}



@media screen and (max-width: 930px) {
     #aboutmetext{
        width:640px;
        margin:0 0 20px 0;
        text-align:center;
        }
  .parent{
    flex-wrap: wrap;
    align-content: center;
    justify-content: center;
  }
}

@media screen and (max-width:1150px){
  .item1{
    width: 85%;
  }
}

.text-center{
  border-style: solid;
  border-color: green;
}

<div class="parenttwo container-fluid">
  <h1 class="text-center"> Hello World</h1>
  <img src="http://www.onepagemania.com/wp-content/uploads/2014/01/Untitled-12.jpg" alt="Thumbnail1" class="item1">
  <img src="http://michaelacevedo.com/images/portfolio/sprk-crtv-branding.jpg" alt="Thumbnail1" class="item1">
  <img src="http://www.niceoneilike.com/webdesign-inspiration/1572_1_bartek.wojtyca.pl-webdesign-inspiration-website-clean-creative.jpg?m=1364289144" alt="Thumbnail1" class="item1">
  <img src="http://www.designlicks.com/uploads/licks/656x413/21084_20150316015538000000.jpg" alt="Thumbnail1" class="item1">
  <img src="http://www.niceoneilike.com/webdesign-inspiration/2294_1_madebydaryl.co.uk-webdesign-inspiration-website-clean-creative.jpg?m=1371803382" alt="Thumbnail1" class="item1">
  <img src="http://www.awwwards.com/awards/submissions/2015/07/55b88b065ec9a.jpeg" alt="Thumbnail1" class="item1">
</div>

【讨论】：

【解决方案2】：

你需要给它一个宽度，以便它可以跨越整行：

h1.text-center{
  border-style: solid;
  border-color: green;
  width:100%;
}

https://codepen.io/anon/pen/rrWRxr

【讨论】：

【解决方案3】：

您只需要像您建议的那样从.parenttwo 和 display:block 中删除所有 flex 样式：

.parenttwo {
  max-width:1000px;
  min-height:500px;
  background-color: white;
  border-style: solid;
  border-color: green;
  display:block;
}

【讨论】：