html - 如何在 flexbox 中居中文本?
问题描述
为什么文本不在下面代码的中心?(标题和标语行)。
应该是这样的,
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
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>
推荐阅读
- php - PHP XML Array Slice 和 Reverse 或 Reverse then Array Slice
- c# - C# 向 Access 数据库插入数据
- java - 从 HttpRequestExecutingMessageHandler 获取请求正文、url
- java - 如何使用 Apache POI 解密 .doc/docx 文件?
- javascript - 带平面的 TreeView
- 结构体
- testing - MSBuild:如何按属性值取消引用属性?
- python - 默认参数是否会覆盖 mypy 的类型提示?
- python - 检查表是否有记录 - Peewee 模块
- android - android studio 不接受的 .jar 文件的文件名中的非法字符
- angular - 服务相互调用时检测到 Typescript 循环依赖