不能使用display：table; 与text-align：center一起;

Question

我不能使用“text-align：center;” 和“display：table;”一起 它只接受“display：table;” 当我删除“display：table;” 文本集中，但我想要它们两个因为“display：table;” 只要文本是，就将行保留在文本的底部。

这是我的css：

h2 {
  margin-top: 70px;
  border-bottom: 2px black solid;
  text-align: center;
  display: table;
}

这是我的HTML：

<h2><?php echo ucfirst($category[0]['name']); ?></h2>

Answer 1

display:table删除元素的块行为，所以现在宽度由内容定义; 然后你看不到任何视觉文本居中，因为如果你想要桌子但是在页面中心你可以使用auto边距（中心整个元素），那么它周围没有更多空间来居中元素，请检查此背景片段看看会发生什么：

 h2 { text-align: center; background: tomato; border-bottom: 2px black solid; } .table { display: table; margin: 70px auto 0; } 

 <h2 class="table">My title</h2> <h2>My title</h2> 

Answer 2

表格宽度出现此问题。

table defualt width是内容宽度。

您设置所需的表格宽度。 也许宽度：100％

Answer 3

display:table和text-align:center将一起工作，如果你提到表的宽度。 因为默认情况下，表格只会占用其中的内容宽度。 因此，您可以为表格设置宽度，如下所示：

 h2 { margin-top: 70px; border-bottom: 2px black solid; text-align: center; display: table; min-width: 100px; padding-left: 15px; padding-right: 15px; } 

 <h2>Test text</h2> <h2>Test text Test text Test text</h2> 

我想你的解决方案应该是：使用宽度但添加一个条件来检查变量是否为空：

<?php 
if($category[0]['name'] != ''){
 echo "<h2>" . ucfirst($category[0]['name']) . "</h2>";
}
?>