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

Posted 2023-03-29

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

【英文标题】：How to center text title within 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"  class="item1">
  <img src="http://michaelacevedo.com/images/portfolio/sprk-crtv-branding.jpg"  class="item1">
  <img src="http://www.niceoneilike.com/webdesign-inspiration/1572_1_bartek.wojtyca.pl-webdesign-inspiration-website-clean-creative.jpg?m=1364289144"  class="item1">
  <img src="http://www.designlicks.com/uploads/licks/656x413/21084_20150316015538000000.jpg"  class="item1">
  <img src="http://www.niceoneilike.com/webdesign-inspiration/2294_1_madebydaryl.co.uk-webdesign-inspiration-website-clean-creative.jpg?m=1371803382"  class="item1">
  <img src="http://www.awwwards.com/awards/submissions/2015/07/55b88b065ec9a.jpeg"  class="item1">
</div>

【参考方案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"  class="item1">
  <img src="http://michaelacevedo.com/images/portfolio/sprk-crtv-branding.jpg"  class="item1">
  <img src="http://www.niceoneilike.com/webdesign-inspiration/1572_1_bartek.wojtyca.pl-webdesign-inspiration-website-clean-creative.jpg?m=1364289144"  class="item1">
  <img src="http://www.designlicks.com/uploads/licks/656x413/21084_20150316015538000000.jpg"  class="item1">
  <img src="http://www.niceoneilike.com/webdesign-inspiration/2294_1_madebydaryl.co.uk-webdesign-inspiration-website-clean-creative.jpg?m=1371803382"  class="item1">
  <img src="http://www.awwwards.com/awards/submissions/2015/07/55b88b065ec9a.jpeg"  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;