Html element alignment issue

Question

I have created header in the top of page as give below. But why it keeps space from top page border even though I have kept margin 0?

FIDDLE LINK

<body><div class="page-header header" style="color:fff; font-size: large; font-family: Arial;
">
            <h1 class="page-header-text">Review Networks</h1>
        </div>

Having <body> is superfluous. It's already inside of a body element. — Dissident Rage
– Dissident Rage, Commented Apr 2, 2014 at 18:11
possible duplicate of Basic HTML/CSS - margin & display behaviour — zzzzBov
– zzzzBov, Commented Apr 2, 2014 at 18:14

TylerH · Accepted Answer · 2014-04-02 18:39:25Z

2

Add the property margin-top: 0; to your .page-header-text selector.

See this JSFiddle for a working code snippet of the vertical centering you want.

edited Apr 2, 2014 at 18:39

answered Apr 2, 2014 at 18:09

TylerH

21.3k84 gold badges84 silver badges121 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

user2129623 Over a year ago

I want it to align in center vertically not the horizontal. This does not help

TylerH Over a year ago

@Programming_crazy I will edit my answer once more, then. It's already center-aligned vertically.

TylerH Over a year ago

@Programming_crazy I've added a JSFiddle which should give you the result you want.

user2129623 Over a year ago

can you please tell me how can I increase header height? without using pixel? I did height:10%; but did not help

TylerH Over a year ago

@Programming_crazy height:10%; will specify a total element height of 10% of the parent element. What you can do is change padding-top: 5px; to padding-top: 1%; to achieve roughly the same result.

Ekin · Accepted Answer · 2014-04-02 18:34:08Z

2

I usually do that like this;

my first answer was : fiddle - http://jsfiddle.net/TPQnx/2/

As you don't want position:absolute;

new fiddle: http://jsfiddle.net/TPQnx/3/

Changes I've made:

added this to header class:

text-align:center;

and added;

h1 {
margin: 0 auto;
padding-top: 0;
}

Hope this helps.

edited Apr 2, 2014 at 18:34

answered Apr 2, 2014 at 18:21

Ekin

1,9102 gold badges31 silver badges48 bronze badges

3 Comments

Ekin Over a year ago

Okay I've handled it. Editing the answer

user2129623 Over a year ago

thanks, but height:10%; why it does not increase header height? I dont want to use pixel for height

Ekin Over a year ago

it's funny cause when I change the font-size to e.g 16px it changes the header height proportionally. I'm trying to solve it somehow

Hiram Hibbard · Accepted Answer · 2014-04-02 18:48:10Z

2

Add this to your CSS:

h1 {
    margin: 0 auto;
    padding-top: 0;
    text-align: center;
}

Browsers add their own default styling, which was causing the margin issue with the h1. Setting margin: 0 auto; overrides that default styling. Auto tells the browser to split the remaining space between the left and the right of the element, thus centering it.

edited Apr 2, 2014 at 18:48

answered Apr 2, 2014 at 18:11

Hiram Hibbard

5372 silver badges10 bronze badges

5 Comments

user2129623 Over a year ago

thanks but why text does not align in center? jsfiddle.net/karimkhan/Uwucd/1

Hiram Hibbard Over a year ago

Programming_crazy, if you want the text to be centered, you just need to add 'auto' to the left and right margins. I updated my answer with this. Also be sure to include text-align: center;

user2129623 Over a year ago

@Hiran: I want it to align in center vertically not the horizontal. This does not hep

Kevin Over a year ago

@HiramHibbard Could you add a little more description about why it works?

Hiram Hibbard Over a year ago

@Kevin sure. Updated my answer to give a few more details.

Collectives™ on Stack Overflow

Html element alignment issue

3 Answers 3

5 Comments

3 Comments

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

5 Comments

3 Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related