如何在 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 肯定会对您有所帮助
我试过<meta name="viewport" content="width=device-width, initial-scale=1.0">
,但没有发生:jsfiddle.net/08rpdLut/1【参考方案2】:
你也必须对齐 p 的内容。您可以使用 text-align: center 或 display: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
在body
或p
标签中
【讨论】:
以上是关于如何在 flexbox 中居中文本?的主要内容,如果未能解决你的问题,请参考以下文章