Html 文本对齐：居中和对齐项目：居中不能水平工作
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/41438699/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Text-align: center and align-items: center not working horizontally
提问by m_cht
This has never been the case to me before. I tried text-align: centeron all sorts of places and they all don't work. They work vertically but they don't working horizontally. I'm trying to get it work both horizontally and vertically for each box.
我以前从未遇到过这种情况。我尝试text-align: center了各种地方，但都不起作用。它们垂直工作，但不能水平工作。我试图让它为每个盒子水平和垂直工作。
This is my code:
这是我的代码：
.boxes {
height:100%;
}
.box {
width: 33%;
height: 20%;
display: -webkit-flex;
}
.box p {
display: flex;
align-items: center;
}
.box1 {
background: magenta;
}
.box2 {
background: cyan;
}
.box3 {
background: yellow;
}
.box4 {
background: orange;
}
.box5 {
background: purple;
}
* {
margin:0;
padding:0;
}
html, body {
height: 100%;
}<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="tabletest.css" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div class="boxes">
<div class="box box1"><p>Box 1</p></div>
<div class="box box2"><p>Box 2</p></div>
<div class="box box3"><p>Box 3</p></div>
<div class="box box4"><p>Box 4</p></div>
<div class="box box5"><p>Box 5</p></div>
</div>
</body>
</html>I'm also trying to stick to percentage to have a responsive design.
我也试图坚持百分比来进行响应式设计。
EDIT: This may seem like a duplicate to another post, but my question here is how do I get the texts aligned directly in the center (both vertically and horizontally) while keeping the order of the boxes.
编辑：这似乎是另一个帖子的重复，但我的问题是如何在保持框顺序的同时将文本直接对齐在中心（垂直和水平）。
回答by Sebastian Brosch
You can use the following solution, using flexbox:
您可以使用以下解决方案，使用 flexbox：
.boxes {
height:100%;
}
.box {
width:33%;
height:20%;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
}
.box1 {
background: magenta;
}
.box2 {
background: cyan;
}
.box3 {
background: yellow;
}
.box4 {
background: orange;
}
.box5 {
background: purple;
}
* {
margin:0;
padding:0;
}
html, body {
height: 100%;
}<div class="boxes">
<div class="box box1"><p>Box 1</p></div>
<div class="box box2"><p>Box 2</p></div>
<div class="box box3"><p>Box 3</p></div>
<div class="box box4"><p>Box 4</p></div>
<div class="box box5"><p>Box 5</p></div>
</div>回答by DeveloperDahak
回答by Prodip Das
Use this:
用这个：
.box p {
align-items: center;
display: block;
text-align: center;
width: 100%;
}
回答by dhaveed
Try the following options
尝试以下选项
.boxes {
height:100%;
}
.box {
width: 33%;
height: 20%;
}
.box p {
text-align: center;
}
.box1 {
background: magenta;
}
.box2 {
background: cyan;
}
.box3 {
background: yellow;
}
.box4 {
background: orange;
}
.box5 {
background: purple;
}
* {
margin:0;
padding:0;
}
html, body {
height: 100%;
}
Note: i used text-align insted of align-items
注意：我使用了 align-items 的 text-align 插入
回答by Cosimo wiSe
You can use also just this:
你也可以只使用这个：
.box p {
width: 100%;
display: flex;
align-items: center;
text-align: center
}
回答by Hezron
Try this.
尝试这个。
.boxes {
height:100%;
}
.box {
width: 33%;
height: 20%;
display: -webkit-flex;
position: relative;
}
.box p {
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
}
.box1 {
background: magenta;
}
.box2 {
background: cyan;
}
.box3 {
background: yellow;
}
.box4 {
background: orange;
}
.box5 {
background: purple;
}
* {
margin:0;
padding:0;
}
html, body {
height: 100%;
}
