无法居中对齐表格单元格中的p？

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

我已经把CSS的内联样式上div和p但仍然不居中文本

Answer 1

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

Answer 2

如果右键单击“中间”一词并选择“检查元素”，那么这将在您的页面中打开一个元素树。你可以很快发现<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，table-cell），定位会更容易定制。

具体，我建议你保持你的<div> S，并更换<p>与<table><tr><td>，然后你可以在table把width: 100%使预期text-align会工作。