HTML-центрированный DIV

Я пытаюсь центрировать div. Это мой код:

<!Doctype Html>
<html>
    <head>
        <title>title</title>
        <style type="text/css">
            * {
                text-align: left;
            }
        </style>
    </head>
    <body>
        <div id="container" style="width: 500px; margin-left: auto; margin-right: auto; text-align: center;">
            <div id="content" style="text-align: center;">
                <p>Beispiel: DIV Container horizontal zentrieren.</p>
            </div>
        </div>
    </body>
</html>

Это не полностью центр, потому что я установил в сбросе CSS, что выравнивание текста осталось. Если я уберу эту строку, все в порядке. Почему выравнивание текста: центр; div с идентификатором #content не переопределяет сброс CSS?

Источник

4 ответа

Решение

Тебе нужно !important перезаписать это (оставив тег p)

#content{margin:0 auto; background:red; width: 500px; text-align: center !important;}

ДЕМО 1

Или вы можете написать CSS для тега p

#content p{text-align: center }

ДЕМО 2

Источник

Попробуй это

Ключевым моментом является

margin: 0 auto
Источник

В HTML * тег означает, что все теги учитываются строго как свойство, как вы упомянули между ними, вам нужно немного изменить свой стиль, перейдите по ссылке

Источник

Еще лучше, меньше разметки:

<!Doctype Html>
<html>
    <head>
        <title>title</title>
        <style type="text/css">
            #content{
                width: 500px;
                margin:0 auto;
            }
            #content p {
                text-align:center; 
            }
        </style>
    </head>
    <body>
        <div id="content">
            <p>Beispiel: DIV Container horizontal zentrieren.</p>
        </div>
    </body>
</html>

В большинстве случаев лучше не использовать "онлайн-стили". Также переместите ваши стили в отдельный файл CSS для лучшей ремонтопригодности.

Источник
Другие вопросы по тегам