Как я могу центрировать заголовок в CSS?

Question

Новичок здесь с простым (и, несомненно, немым) вопросом.

Я пытаюсь центрировать заголовок. Я попытался с помощью выравнивания текста свойства в CSS, но безрезультатно:

h1 { 
    text-align: center; 
} 

заголовок остается на одном уровне слева.

После этого немного копания, я попытался это:

h1 { 
    margin: 0 auto; 
} 

Еще не повезло. Затем я попытался поставить заголовок в DIV с идентификатором «заголовок»:

#headline { 
    text-align: center; 
} 

И, когда это еще не сработало, я попробовал:

#headline { 
    margin: 0 auto; 
} 

Нет удачи.

Затем я столкнулся с предыдущей дискуссией о центрировании DIV в CSS. Один плакат сказал, что «элемент заполняет 100% ширины родительского элемента. Если вы хотите сосредоточить его, то первое, что вам нужно сделать, это сделать его менее 100%. Поэтому установите ширину на div, 200 пикселей или что-то еще «.

Когда я попытался

#headline { 
    width: 1200px; 
    margin: 0 auto; 
} 

ничего не произошло.

Но когда я попытался:

#headline { 
    width: 1200px; 
    text-align: center; 
} 

заголовок сделал смещение к центру. Дело в том, что оно не идеально сосредоточено.

Я пробовал регулировать ширину. Это помогает некоторым, но когда я делаю окно больше или меньше, заголовок больше не центрируется.

Любые предложения?

Извинения за непреднамеренный faux pas (это мой первый пост). Спасибо за вашу помощь.

Answer 1

Просто сделайте ширину 100% вместо фиксированной ширины пикселей. Это значение по умолчанию (для элемента блока, такого как <h1>, но вы, должно быть, что-то изменили.) Это сделает его динамичным.

См. this example на JSFiddle.net.

Answer 2

Первый CSS, который вы опубликовали, отлично работает, если нет, у вас должен быть другой CSS, который его переопределяет.

h1 { 
 
    text-align: center; 
 
}

<h1>Centered Headline</h1>

Answer 3

По умолчанию это будет центрирован:

h1 { 
 
    text-align: center; 
 
}

<h1>Test</h1>

Хотя существуют различные способы его можно капризничать, скорее всего, кандидатом является то, что вы установили h1 { display: inline } (или что-то иное, чем block) в другом месте вашего кода. Попробуйте дать h1 цвет фона или outline: 2px solid #0f0, чтобы увидеть, где находятся границы макета.

У Firefox и Chrome также есть отличные инструменты для разработчиков, поэтому проверка h1 покажет вам, откуда все стили. Вы можете пройти и снять отметки со стилей, пока не придете к виновнику.