Выравнивание текста: центр не работает

Я пытался искать ответы, но ничего не получалось. Я пытаюсь выровнять абзац. Я уверен, что ничто не переписывает код в CSS. Вот HTML и CSS:

body {
  background-image: url("../../images/pic01.jpg");
  background-repeat;
}
#main {
  background-color: rgb(255, 84, 0);
  width: 75%;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: auto;
  margin-top: auto;
  overflow: auto;
  height: 100%;
  color: rgb(255, 255, 255);
}
#center {
  text-align: center;
}
<body id="top">
  <div id="main">
    <p id="center">
      <h1> TEST </h1> 
    </p>
  </div>
</body>

В чем здесь ошибка?

Источник

5 ответов

Решение

text-align: center влияет на чистые текстовые узлы, а также дочерние элементы, которые имеют display: inline; или же display: inline-block;, Ваш предполагаемый дочерний элемент h1 который по умолчанию имеет display: block;, Так что даже если бы было разрешено иметь h1 внутри p это все равно не сработает (например, если вы заменили <p id="center"> по <div id="center"> вы все равно столкнетесь с "нерабочим" центрированием).

p может иметь только так называемое фразовое содержимое, то есть только определенные элементы допускаются в качестве дочерних элементов внутри абзаца.

Использование любых элементов содержимого потока (например, например, h1) приводит к автоматическому закрытию "окружения" p тег. Вот что действительно отображает ваш браузер:

<div id="main">
    <p id="center"> </p>
    <h1> TEST </h1> 
</div>

И последнее, потому что вы сказали, что вы новичок в вопросах внешнего интерфейса:

Не использовать #id селекторы в CSS. Всегда используйте CSS .class вместо этого. Когда вы достигнете большего, прочитайте о причинах здесь: http://oli.jp/2011/ids/

Источник

Для text-aling: center чтобы работать, вы должны также пройти margin: auto вариант.

Источник

Ваш HTML неверен. <p> не может содержать <h1>, Большинство браузеров пытаются исправить ошибку, закрывая абзац перед заголовком, а затем создавая другой абзац после него.

Вы можете удалить заголовок или абзац и использовать CSS для стилизации по мере необходимости.

Пример jsFiddle

Источник

Дать text-align: center в #main h1, лайк:

#main h1 {
  text-align: center;
}

Хотя вы использовали <h1> Внутри <p>, который является недействительным HTML, и ваш браузер обрабатывает его, закрывая <p></p> до начала <h1>,

Посмотрите на фрагмент ниже:

#main h1 {
  text-align: center;
}

body {
    background-image: url("../../images/pic01.jpg");
    background-repeat;
}

#main{
    background-color: rgb(255, 84, 0);
    width: 75%;

    margin-left: auto;
    margin-right: auto;
    margin-bottom: auto;
    margin-top: auto;

    overflow:auto;
    height:100%;
    color: rgb(255, 255, 255);
}

#center {
    text-align: center;
}
<html>
    <head>
        <title>HTML PAMOKOS</title>
        <link rel="stylesheet" href="../assets/css/html.css" />
    </head>

    <body id="top">
        <div id="main">
            <p id="center"></p>
            <h1> TEST </h1>
        </div>
    </body>

</html>

Надеюсь это поможет!

Источник 

  body {
        background-image: url("../../images/pic01.jpg");
        background-repeat;
    }

    #main{
        background-color: rgb(255, 84, 0);
        width: 75%;
    
        margin-left: auto;
        margin-right: auto;
        margin-bottom: auto;
        margin-top: auto;
    
        overflow:auto;
        height:100%;
        color: rgb(255, 255, 255);
    }
#center {
    text-align: center;
}
 

h1{
   text-align: center;
}
 <!DOCTYPE HTML>
    
    <html>
     <head>
      <title>HTML PAMOKOS</title>
      <link rel="stylesheet" href="../assets/css/html.css" />
     </head>
    
     <body id="top">
            <div id="main">
                <p id="center"> <h1> TEST </h1> </p>
            </div>
     </body>
    
    </html>

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