CODEWITHSUNDEEP
htmlcss
androidY
androidY

Reputation: 45

Trying to align <h1> and <p> elements at left of my icon font

I have an icon font on the left and I want to put a <h1> and a <p> elements on the right side of my lock icon font.

I want the <h1> above and <p> below and I also want the <p> at center.

But I want the <h1> and <p> align at center, but they are always aligning in the left.

I already tried with margin:0 auto; and text-align:center; but nothing works.

Somebody there see what Im doing wrong?

Im trying something like this:

enter image description here

My jsfiddle with the problem:

(I try to add my font-awesome.css to my fiddle but I guess it doesnt works)

http://jsfiddle.net/ritz/K3Y5W/1/

My html:

<div id="login">
    <div id="align_center">
    <h1>Reserved Area</h1>
    <p>Cookies and Creams</p>
    <span class="lock"><i class="fa fa-lock"></i></span>
   </div>
</div>

My css:

#login{position:absolute; background:green; top:50%; left:50%; height:320px; width:300px; margin-top:-160px; margin-left:-150px;}
#login p {float:left; color:#000; font-family:'verdana'; font-size:18px; text-align:center;}
#login h1 {float:left; color:#000;font-family:'verdana'; font-size:35px;}
#login span>i{color:#fff; font-size:5em;}
#align_center {margin:0 auto; text-align:center;}

Upvotes: 0

Views: 1246

Answers (2)

Liftoff
Liftoff

Reputation: 25432

You are floating the elements to the left:

#login p {float:left; color:#000; font-family:'verdana'; font-size:18px; text-align:center;}
#login h1 {float:left; color:#000;font-family:'verdana'; font-size:35px;}

Don't do that :)

JSFiddle

So here's what I did.

1. Remove the float from the login elements

Instead, apply the opposite, float:right; to the container element, .align-center.

2. Force a width on the container

By default, <div>'s are 100% width, so you have to define it to fit in the width allowed, which is, in this case, 396px.

3. Set a top margin

To align the <h1> and <p>, you need to set a top margin to push them down, in this case, I used CSS3's calc() function to get the exact margin to center it, which is (50% - 65px) / 2, or just (25% - 32px).

width: calc(25% - 32px);

Upvotes: 3

guest
guest

Reputation: 6718

Floated elements are "srhink-wrapped," meaning that they'll get sized to their content. Next, you ask it to center the text within the element, which really does nothing---there's no extra space to center it in. Set a width on the <h1> and <p>.

Upvotes: 2

Related Questions