Question

我无法使用＆＃34; text-align：center;＆＃34;与＆＃34; display：table;＆＃34;它只接受＆＃34; display：table;＆＃34;当我删除＆＃34; display：table;＆＃34;文本集中，但我想要它们两个因为＆＃34; display：table;＆＃34;只要文本是。

，就将行保留在文本的底部

这是我的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

表格宽度出现此问题。

表defualt宽度是内容宽度。

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

Answer 3

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

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

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

3 个答案: