Centering a heading <h1>

Question

Hi Everyone

Quick question, I have a DIV with a H1 inside it, now , I wish to Center my H1 inside this DIV...

I try the following which does not work:

set the H1:

display:inline
margin-left: auto ; 
margin-right: auto ;

But I try this and it does work, can someone explain why the above DOESN'T work?

set the H1:

width: 35%;
margin-left: auto ; 
margin-right: auto ;

Answer 1

Have you tried "text-align: center"?

Answer 2

I think you want to put "text-align: center" on the H1. See this documentation.

Also, you can remove the margin-left and margin-right rules.

Answer 3

You can use padding to get a tight border, without setting the h1 as inline (which can't be centered using automatic margins).

h1 {
    padding: 0;
    width: 35;
    margin-left: auto;
    margin-right: auto;
    // border: ...
}

Answer 4

I don't think your first solution works because you're setting it as inline and only block level elements can be given auto margins IIRC. Also, without setting an explicit width, the auto margin trick doesn't work too great.

Answer 5

try this

h1 {margin: 0pt auto; display: inline-block; min-width: 1%;}

Answer 6

use "text-align:center "on DIV

Answer 7

A block level element has a line break before and after it so it has a definite beginning and end. It is rectangular in shape and can have a width defined.

An inline level element is contained within a block level element and can span multiple lines and does not have to define a rectangular region. According to section 10.3 of the w3c Visual formatting model for inline elements: The 'width' property does not apply. A computed value of 'auto' for 'margin-left' or 'margin-right' becomes a used value of '0'.

You cannot center something that may begin in the middle of one line and end in the middle of another.

For example, how would you center
the text that is bold and spans two lines?

Answer 8

Considering you state your H1 needs a border that doesn't stretch to it's parent container, I recommend using a combination of styling on the DIV wrapper and the H1 element (paste this in to play w/ it):

<style type="text/css">
div.myHeadingClass {
    text-align: center;
    border: 1px solid #d7d7d7;
    padding: 15px;
}

div.myHeadingClass h1 {
    display: inline;
    padding: 10px;
    border: 1px solid red;
}
</style>

<div class="myHeadingClass">
<h1>My Big Ole Heading</h2>
</div>

Answer 9

Dude, it's simple. just like seb stated above.

Just set the H1 to padding 0, and instead of doing "margin-right:auto;margin-left:auto;" save the hassle and do "margin:auto" along with the set width. quick and easy.

Answer 10

The first doesn't work because on inline elements, the automatic margin is zero.

margin: auto; does work on inline elements, it just doesn't have the same effect as on block-level elements.

(To demonstrate this: if you take an inline element, apply a specific margin to it, and then apply an automatic margin to it, its margin will be zero.)