我无法使用" 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>
答案 0 :(得分:3)
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>
答案 1 :(得分:0)
表格宽度出现此问题。
表defualt宽度是内容宽度。
您可以设置所需的表格宽度。也许宽度:100%
答案 2 :(得分:0)
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;
}
&#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>";
}
?>