How do I center an h1 in the body

M

6

44

I tried centering my h1 in the body tag like this:

h1 {margin:0 auto}

http://jsfiddle.net/qPDwY/

But it doesn't center. How do I fix it?

Mudstone answered 10/1, 2014 at 18:21 Comment(3)

Use text-align:center... jsfiddle.net/9bSnT .. The h1 is a block level element with a width of 100%.. margin:0 auto won't work in this instance. – Minorite 10/1, 2014 at 18:22

text-align: center? h1 is by default 100% width. – Unstuck 10/1, 2014 at 18:22

Margin: 0 auto; Works in a fixed or 100% width. You can also use text-align: center; but that will only work again as long as your width on your site is set to 100% or fixed and centered itself. The other thing you should be careful of is using text-align: center; will center all Unless you specifically point to a particular nested h1 as here .yourclass h1 {text-align: center} – Shuntwound 10/1, 2014 at 18:30

B

72

In this case:

h1 {
    text-align:center;
}

jsFiddle example

The margin:auto rule is used when you set a width on the element, which you haven't done.

Balder answered 10/1, 2014 at 18:22 Comment(0)

R

6

You can center it by setting the width.

h1 {
    width:500px;
    margin: 0 auto;
    background: gray;
    text-align: center;
}

<body>
     <h1>My Title</h1>
</body>

Rossman answered 10/1, 2014 at 18:26 Comment(0)

C

3

text-align: center is best choice but if you still want to center it using margin: 0 auto you have assign some width to H1 (a block) element.

You can center a block-level element by giving it margin-left and margin-right of auto (and it has a set width, otherwise it would be full width and wouldn’t need centering). That’s often done with shorthand like this:
.center-me {
  margin: 0 auto;
}
Source: https://css-tricks.com/centering-css-complete-guide/#horizontal-block

Coontie answered 2/6, 2021 at 9:51 Comment(0)

T

0

Alternatively, you could try this:

h1 {
    text-align: center;
    margin: 0px auto;
    display; block;
}

Thrum answered 10/1, 2014 at 18:26 Comment(1)

By default the h1 is a block level element and without a width the margin:0 auto does nothing. – Balder 10/1, 2014 at 18:31

S

0

-div style="margin:0 auto; text-align:left; width:80px;"- sample

change the width to change the position

Saguenay answered 10/1, 2014 at 19:13 Comment(0)

R

0

What j09691 said does work, but not all the time.

This is why I use:

/* Put this inside element/class. */
transform: translateX(400px);

If it doesn't fit in the center of the screen for you, just adjust it. Of course, you could use some css and/or js magic to automatically adjust it.

Radom answered 14/5, 2021 at 5:31 Comment(0)

Recommended topics

Hot tags