Question

以前从未出现过这种情况。我在各种各样的地方试过text-align: center但都不行。它们垂直工作，但它们不能水平工作。我试图让每个盒子都水平和垂直地工作。

这是我的代码：

.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>

我也在努力坚持百分比以获得响应式设计。

编辑：这似乎与另一篇文章重复，但我的问题是如何在保持框的顺序的同时直接在中心（垂直和水平）对齐文本。

Answer 1

您可以使用以下解决方案，使用flexbox：

＆＃13;

<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>

＆＃13;

{{1}}

＆＃13;

Answer 2

添加

justify-content: center;

到你的box课程。

这就是你需要做的一切。请参阅here。

Answer 3

使用此：

 .box p {
    align-items: center;
    display: block;
    text-align: center;
    width: 100%;
}

Answer 4

尝试以下选项

.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%; 
}

注意：我使用了对齐项目的文本对齐

Answer 5

您还可以使用以下内容：

.box p {
    width: 100%;
    display: flex;
    align-items: center;
    text-align: center
}

Answer 6

试试这个。

.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%; 
}

文本对齐：居中和对齐项目：中心不能水平工作

6 个答案: