CODEWITHSUNDEEP
htmlcssasp.net-mvc
John
John

Reputation: 3945

How to get horizontal alignment of headers

I have two headings, 'CompanyName' which appears top left, and 'Date' displays top middle.

I am having difficulty getting them horizontally aligned. I've tried putting them inside a div, but to no effect... How can I fix this problem?

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

Upvotes: 0

Views: 4331

Answers (5)

Toni I
Toni I

Reputation: 81

Try:

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

Upvotes: 1

Sowmya
Sowmya

Reputation: 26979

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

Upvotes: 1

Arun Bertil
Arun Bertil

Reputation: 4648

Try

<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>

enter image description here

Upvotes: 1

Charles
Charles

Reputation: 379

Try adding a lineheight to your div and a vertical align.

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

Upvotes: 0

Arun Bertil
Arun Bertil

Reputation: 4648

Try

div{
    text-align:center
}

Upvotes: 0

Related Questions