如何在 flexbox 中居中文本?

Posted

技术标签:

【中文标题】如何在 flexbox 中居中文本?【英文标题】:How do I center text in flexbox? 【发布时间】:2019-08-19 03:08:35 【问题描述】:

为什么以下代码中的文本不在中心? (标题和标语行)。

应该是

body 
  margin: 0;
  padding: 0;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background: #000;


p 
  position: relative;
  font-family: sans-serif;
  text-transform: uppercase;
  font-size: 2em;
  letter-spacing: 4px;
  overflow: hidden;
  background: linear-gradient(90deg, #000, #000fe6, #000);
  background-repeat: no-repeat;
  background-size: 80%;
  animation: animate 3.75s linear infinite;
  -webkit-background-clip: text;
  -webkit-text-fill-color: rgba(45, 45, 45, .05);


@keyframes animate 
  0% 
    background-position: -500%;
  
  100% 
    background-position: 500%;
  
<body>
  <div>
    <p>Title</p>
    <p>Tag Line</p>
  </div>
</body>

为什么上面代码中的文本不在中心? (标题和标语行)

应该是

【问题讨论】:

为什么不在p 规则中添加text-align: center; 将 text-align:center 添加到 div 标签或你的 body 标签 扩展上述 cmets - 这是因为您的 flex 仅将 div 对齐到中心并使 div 与其内容一样大 - divs 内容左对齐 【参考方案1】:

在您的 p 中使用它

 margin:0 auto;
  display:block;
  text-align:center;

body 
  margin: 0;
  padding: 0;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background: #000;


p 
  position: relative;
  font-family: sans-serif;
  text-transform: uppercase;
  margin:0 auto;
  display:block;
  text-align:center;
  font-size: 2em;
  letter-spacing: 4px;
  overflow: hidden;
  background: linear-gradient(90deg, #000, #000fe6, #000);
  background-repeat: no-repeat;
  background-size: 80%;
  animation: animate 3.75s linear infinite;
  -webkit-background-clip: text;
  -webkit-text-fill-color: rgba(45, 45, 45, .05);


@keyframes animate 
  0% 
    background-position: -500%;
  
  100% 
    background-position: 500%;
  
<body>
  <div>
    <p>Title</p>
    <p>Tag Line</p>
  </div>
</body>

【讨论】:

上述代码中屏幕变小(不进入下一行)时,文本怎么变小? 为此,您必须使用 @media 并在您的 css 中更改 font-size。 refer this link 但是如何每次都自动执行呢?自动缩小文本 您必须为多个例如:@media screen and (min-width: 601px) p font-size: 80px; @media screen and (max-width: 600px) div.example font-size: 30px; 编写样式,否则请参考此link 肯定会对您有所帮助 我试过&lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;,但没有发生:jsfiddle.net/08rpdLut/1【参考方案2】:

你也必须对齐 p 的内容。您可以使用 text-align: centerdisplay:flex + justify-content:center

body 
  margin: 0;
  padding: 0;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background: #000;


p 
  position: relative;
  font-family: sans-serif;
  text-transform: uppercase;
  font-size: 2em;
  letter-spacing: 4px;
  overflow: hidden;
  background: linear-gradient(90deg, #000, #000fe6, #000);
  background-repeat: no-repeat;
  background-size: 80%;
  animation: animate 3.75s linear infinite;
  -webkit-background-clip: text;
  -webkit-text-fill-color: rgba(45, 45, 45, .05);
  text-align: center;


@keyframes animate 
  0% 
    background-position: -500%;
  
  100% 
    background-position: 500%;
  
<body>
  <div>
    <p>Title</p>
    <p>Tag Line</p>
  </div>
</body>

【讨论】:

【参考方案3】:

添加css

text-align:center

bodyp 标签中

【讨论】:

以上是关于如何在 flexbox 中居中文本?的主要内容,如果未能解决你的问题,请参考以下文章

在 svg 中居中文本无法正常工作

如何在弹性项目(单元格)中居中图像

在 Flexbox 中居中不起作用。啥是高度、宽度、显示和位置要求?我错过了啥? [复制]

如何在 Scintilla 中居中对齐文本?

如何在编辑文本中居中图标?

如何在tabhost中居中文本?