CODEWITHSUNDEEP
htmlcss
Rampill
Rampill

Reputation: 113

Center text to parent element

I am trying to center the text to a parent element. Here is my code.

HTML

<div class="header"><!--header-->
<span class="child">

<h1 class="h1temp">
        <div class="left">Hello</div>
        <div class="left down">There</div>
        <div class="left downer">James</div>
</h1>

</span>
</div><!--header-->

CSS

.header {
    height: 200px;
    background-color:#C0C0C0;
    position:relative;
}
.child {
    position:absolute;
    margin:50% auto;
    width:900px;
}
.h1temp {
    margin:0 auto;
    font-size: 20px;
}

The problem is that the text aligns with the browser, not the parent element. Here is what it currently looks like jsFiddle.

Upvotes: 0

Views: 147

Answers (2)

Hovhannes Sargsyan
Hovhannes Sargsyan

Reputation: 1083

Just write display:table; to .h1temp

Upvotes: 0

Jashwant
Jashwant

Reputation: 29025

I assume you want to align h1temp.

margin: x auto only works if element has width`

.h1temp {
    margin:0 auto;
    font-size: 20px;
    width: 500px;
}

Upvotes: 3

Related Questions