如何在flexbox中居中放置文字？
[英]How do I center text in flexbox?
问题描述
Why the texts are not at the center in the below code? 
为什么以下代码中的文本不在中心？ (Title & Tag Line). （标题和标签行）。
It should be like, 应该是这样
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>
Why the texts are not at the center in the above code? 为什么文本不在以上代码的中心？ (Title & Tag Line) （标题和标语线）
It should be like, 应该是这样
3 个解决方案
解决方案1
3 已采纳 2019-03-28 11:08:50
use this in your p 在你的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>
解决方案2
1 2019-03-28 11:13:37
You have to align the p's content too. 您还必须对齐p的内容。 You can do it with text-align: center or with display:flex + justify-content:center 您可以使用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
1 2019-03-28 11:52:24
Add css 添加CSS
text-align:center
in body or p tag 在body或p标签中
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
如何使用flexbox正确居中文本和图像？ - How do i center text and an image with flexbox properly?
如何将 flexbox 子行居中？ - How do I center flexbox child rows?
如何使用Flexbox布局垂直居中旋转文本？ - How can I vertically center rotated text using Flexbox layout?
如何在不使用 flexbox 的情况下将 css 三角形居中？ - How do I center a css triangle without using flexbox?
如何在flexbox的子元素中对齐（居中）文本 - How to align(center) text inside childs of flexbox
如何使用flexbox垂直居中放置文本？ - How to TRULY vertically center text with flexbox?
如何在Flexbox div中居中显示文本标题 - How to center text title within Flexbox div
如何将内容集中在flexbox中 - How do you center content in a flexbox
如何修复我的段落元素文本在 flexbox 中未对齐 - How do I fix my paragraph element text not aligning in flexbox
如何在单个 Flexbox 中居中 header、4 个框和 4 个文本项？ - How can I center a header, 4 boxes, and 4 text items within a single Flexbox?
相关标签