如何获得标题的水平对齐方式

Question

我有两个标题，＆＃39; CompanyName＆＃39;出现在左上角，＆＃39;日期＆＃39;显示顶部中间。

我很难让它们水平对齐。我已经尝试将它们放入div中，但没有效果......我该如何解决这个问题？

<div>
    <h1>CompanyName</h1>
    <h1 style="text-align:center">Date @Html.DisplayFor(model => model.TodaysDate)</h1>
</div>

Answer 1

div {
    text-align:center;
    background:green;
}
div h1 {
    display: inline-block;
    background: red;
    margin: 0 auto
}
h1:first-child {
    display:inline-block;  float:left
}

<强> DEMO UPDATED 2

Answer 2

尝试

<div style="clear: both">
    <h2 style="float: left;width: 40%;">CompanyName</h2>
    <h2 style="/* float: right; *//* text-align: center; */">Date @Html.DisplayFor(model =&gt; model.TodaysDate)</h2>
</div>

Answer 3

尝试：

<div style="display:table">
    <h2 style="display:table-cell">test1</h2>
    <h2 style="display:table-cell">test2</h2>
</div>

Answer 4

尝试

div{
    text-align:center
}

Answer 5

尝试在div中添加lineheight和垂直对齐。

vertical-align: middle;
line-height: 40px