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 `` is superfluous. It's already inside of a body element. — Dissident Rage, Apr 02 '14 at 18:11
possible duplicate of [Basic HTML/CSS - margin & display behaviour](http://stackoverflow.com/questions/14358862/basic-html-css-margin-display-behaviour) — zzzzBov, Apr 02 '14 at 18:14

TylerH · Accepted Answer · 2014-04-02T18:39:25.417

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 02 '14 at 18:39

answered Apr 02 '14 at 18:09

TylerH

20,799
66
75
101

I want it to align in center vertically not the horizontal. This does not help – user2129623 Apr 02 '14 at 18:20
@Programming_crazy I will edit my answer once more, then. It's already center-aligned vertically. – TylerH Apr 02 '14 at 18:21
@Programming_crazy I've added a JSFiddle which should give you the result you want. – TylerH Apr 02 '14 at 18:39
can you please tell me how can I increase header height? without using pixel? I did `height:10%;` but did not help – user2129623 Apr 02 '14 at 18:49
@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. – TylerH Apr 02 '14 at 18:55

Hiram Hibbard · Answer 2 · 2014-04-02T18:48:10.677

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 02 '14 at 18:48

answered Apr 02 '14 at 18:11

Hiram Hibbard

537
2
10

thanks but why text does not align in center? http://jsfiddle.net/karimkhan/Uwucd/1/ – user2129623 Apr 02 '14 at 18:14
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; – Hiram Hibbard Apr 02 '14 at 18:18
@Hiran: I want it to align in center vertically not the horizontal. This does not hep – user2129623 Apr 02 '14 at 18:20
@HiramHibbard Could you add a little more description about why it works? – Kevin Apr 02 '14 at 18:34
@Kevin sure. Updated my answer to give a few more details. – Hiram Hibbard Apr 02 '14 at 18:48

Ekin · Answer 3 · 2014-04-02T18:34:08.150

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 02 '14 at 18:34

answered Apr 02 '14 at 18:21

Ekin

1,957
2
31
45

1

Okay I've handled it. Editing the answer – Ekin Apr 02 '14 at 18:32
thanks, but `height:10%;` why it does not increase header height? I dont want to use pixel for height – user2129623 Apr 02 '14 at 18:38
1

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 – Ekin Apr 02 '14 at 18:48

Html element alignment issue

3 Answers3