Question

我对标题问候世界的中心问题。我希望标题位于白色白色容器内，但我希望它能够占据它自己的行并将标题放在标题下面。我尝试通过给标题一个类来解决这个问题，并将它的显示属性更改为一个块的但不起作用。我也试过在外面添加一个div容器但是也没有用，至少我没有设法让它工作。有什么建议？

CODEPEN：

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

Answer 2

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

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

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

Answer 3

您只需要从.parenttwo中删除所有的所有动态样式，并按照您的建议显示：阻止：

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

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

3 个答案: