Question

我正在进行垂直对齐，所以我将<p>放在桌子上，但是当我试图将文本居中时，text-align:center不会影响它们，但是我的第四个盒子上的div正如你所看到的那样居中？也许是因为display:table-cell？这是我的scss代码：

div {
  text-align: center;
  display: inline-block;
  vertical-align: top;
}
div.top {
  padding: 1%;
  margin: 1%;
  background: #ff99b3;
  height: auto;
  width: 20%;
  text-align: center;
}
div.top p {
  height: 200px;
  display: table-cell;
  vertical-align: top;
}
div.middle {
  padding: 1%;
  margin: 1%;
  background: #ffff99;
  height: auto;
  width: 20%;
}
div.middle p {
  height: 200px;
  display: table-cell;
  vertical-align: middle;
}
div.bottom {
  padding: 1%;
  margin: 1%;
  background: #eb99ff;
  height: auto;
  width: 20%;
}
div.bottom p {
  height: 200px;
  display: table-cell;
  vertical-align: bottom;
}
div.length {
  padding: 1%;
  margin: 1%;
  background: #99ffe6;
  height: auto;
  width: 20%;
}
div.length div {
  background: #ff99b3;
  vertical-align: -425px;
}

<div class="top" style="text-align: center;">
  <p style="text-align: center;">
    <strong>TOP</strong>
  </p>
</div>

<div class="middle">
  <p>
    <strong>MIDDLE</strong>
  </p>
</div>

<div class="bottom">
  <p style="text-align:center;">
    <strong>BOTTOM</strong>

</div>

<div class="length">
  <div>
    <strong>ELEMENT</strong>
  </div>
</div>

我的JsFiddle

我已经在div和p上添加了内联样式的CSS，但仍然没有将文本居中

Answer 1

如果您右键单击＆＃34;中＆＃34;并选择＆＃34; Inspect Element＆＃34;，然后这将打开页面中的元素树。您可以非常快速地发现<p>不是全宽。这就是问题所在。

通常情况下，这可以通过width:100%或margin:0 auto来解决。但这并不适用于<p>元素。

我认为您问题的一部分是您有一个table-cell元素（您的<p>），但它不包含在table-row和table元素中。想想旧式<table>以及它们如何正常设置。

<table>
  <tr>
    <td></td>
  </tr>
</table>

如果您在此设置中包含元素（使用实际的<table>，<tr>，<td>或包含CSS display: table的元素，table-row，{{1对齐将更容易定制。

具体来说，我建议您保留table-cell，然后将<div>替换为<p>，然后将<table><tr><td>放在width: 100%上， table将按预期工作。

Answer 2

在table-cell中使用div并移除p

body {
  margin: 0
}
.table {
  display: table;
  width: 100%
}
.table > div {
  text-align: center;
  display: table-cell;
  height: 200px;
  width: 25%;
  padding: 1%;
}
.top {
  background: #ff99b3;
  vertical-align: top
}
.middle {
  background: #ffff99;
  vertical-align: middle
}
.bottom {
  background: #eb99ff;
  vertical-align: bottom
}
.length {
  background: #99ffe6;
}
.length > div {
  background: #ff99b3;
}

<div class="table">
  <div class="top">
    <strong>TOP</strong>
  </div>
  <div class="middle">
    <strong>MIDDLE</strong>
  </div>
  <div class="bottom">
    <strong>BOTTOM</strong>
  </div>
  <div class="length">
    <div>
      <strong>ELEMENT</strong>
    </div>
  </div>
</div>

不能在表格单元格中心对齐p？

2 个答案: