Center div using margin 0 auto

StackOverflow https://stackoverflow.com/questions/23108611

  •  04-07-2023
  •  | 
  •  

Вопрос

I learned several examples on the internet, but obviously i'm missing something, because my markup is not working.

AFAIK this coude should work, but it doesn't. Why?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
    <body style="background: #cdc7ae" class=" ms-backgroundImage" spellcheck="false">           
        <div style="margin: 20px auto;">Hello!</div>    
    </body>
</html>
Это было полезно?

Решение

You need to specify a width on the <div>, e.g.

<div style="margin: 20px auto; width: 200px">Hello!</div>

Другие советы

So turns out you are looking for:

<div style="margin: 20px auto; text-align: center;">Hello!</div>

Without setting a div width it will be 100%, so we can use text-align: center to get the text in the center. No need to move the whole div by setting a width in this case.

DEMO HERE

You must give a width to your div. Otherwise, it assume 100% width and margin:auto does not take effect.

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top