行/文本不会居中

Question

我尝试使用border-bottom 向h1 添加一行，但是h1 不会居中。另一次尝试是text-decoration: underline，但没有任何改变。对于居中，我尝试在table、tr、td 上使用它。我正在尝试在h1 下方放置一条 2px 的线。我做错了什么？

hr.hrNews {
    background-color: #000000;
    border: 0;
    height: 1px;
    max-width: 236px;
    text-align: center;
    vertical-align: middle;
    width: 100%;
}

<table width="100%" cellpadding="0" cellspacing="0" border="0" style="text-align: center; vertical-align: middle;">
    <tr>
        <td style="text-align: center; vertical-align:middle;">
            <h1 style="text-align: center;">In The News</h1>
            <hr class="hrNews" />
        </td>
    </tr>

</table>

Answer 1

您可以通过使用<h1> 的容器上的text-align 属性来实现此目的：http://jsbin.com/jujurobebo/edit?html,css,output

#bottom{
  min-width: 500px;
}
#top{
  text-align: center;
}
h1{
  width: 230px;
  border-bottom: 1px solid #000000;
  padding-bottom: 10px;
  display: inline-block; 
  margin-bottom: 25px;
}
#bottom img{
  width: 250px
}
#bottom p{
  width: 250px; 
  margin: 0; 
}
#bottom img, 
#bottom #left{
  display: inline-block;
}