How to center elements in DIVs (four separate DIVs)?

[sntshkmr60]

I have four divs in my page of equal length and width. I have one `

` in each div. I want to center the `

` in its div. My current code is something like this:

## CSS ##

body, html { height: 100%; padding: 0; margin: 0; }
div { width: 50%; height: 50%; float: left;}
h1 { display: inline-block;}

## HTML ##

Some header here

[johnegraham2]

If the content of your h1 is just text, you should be able to just add the `text-align: center` to the h1 directly. Then you wouldn’t have to reset the rest of the div’s contents.

An h1 is `display: block` by default, so it should fill the width of its container. And this will center the text.

If your h1 is an image replacement, give it a fixed width with left and right margins `auto`.

Either way you wouldn’t need to set the display as `inline-block`.

[wolfcry911]

I’m guessing he wants the h1 centered vertically as well as horizontally

http://codepen.io/wolfcry911/pen/xKiDb
or
http://codepen.io/wolfcry911/pen/gFbyk

[sntshkmr60]

@wolfcry911
Changing the `display` to `table` and `table-cell` are messing the things up. I have set `cursor: pointer` on the `h1` and when I apply `table-cell` to h1 then pointer is (virtually)enabled to whole screen.

[sntshkmr60]

@kgscott284
That will center horizontally only. I want vertically too.

[sntshkmr60]

@johnegraham2 Setting the h1 to `text-align: center` doesn’t do anything in my case. There is my own reason I have set `display: inline-block`, I don’t mind if h1 is by default `display: block`.

[wolfcry911]

So I needed to guess about the vertical alignment as well as the cursor: pointer?

you could wrap the text in a span and place the pointer on the span instead of the h1…

[Kitty Giraudel]

On a side note: h1 tag should be present only once per page. Once, not four. If you want to deal with subtitles, there are 5 other levels to do this.

[sntshkmr60]

@HugoGiraudel Its not a regular page *(you can say this an app)* and I’m not keeping SEO in my mind while doing this.

Should I use normal `

` and increase *(+ bold)* the text size?

[Kitty Giraudel]

If those are subtitles, use h2. Or the appropriate subtitle level.

If those are quotes, use blockquote.

If it’s some simple content, use p.

[Senff]

In HTML5, having multiple H1’s is allowed and perfectly valid.

[wolfcry911]

Google themselves stated it was okay even before html5

[Kitty Giraudel]

Oh. So my bad. I learnt a while ago “one h1 per page”.

[lamjk]

why your html code just only one??

[sntshkmr60]

Can anybody tell me what is error in this line:

Validator is giving errors.

[Author]

Posts