Я пытаюсь сосредоточить элемент.
Если text-align: center;
применяется к элементу или его родительскому контейнеру?
Учитывая это:
<div class="container">
<h1>This is a centered header.</h1>
</div>
... я должен написать это:
.container {
text-align: center;
}
...или это:
.container h1 {
text-align: center;
}
Оба будут работать. Попробуйте это - здесь JS Fiddle: http://jsfiddle.net/a4jmB/
.container {
text-align: center;
}
Это устанавливает, чтобы весь текст в родительском div был центрирован.
.container h1 {
text-align: center;
}
Это устанавливает весь текст в h1 div для центровки. В основном h1 занимает всю ширину строки независимо от настройки css, поэтому текст будет центрирован.
Второй вариант, вероятно, предпочтительнее, поскольку он применим только к h1 div, а не к любому другому тексту, который может быть в контейнере.
Любой из них будет работать, если оба их макета позволяют им охватить пространство, в котором вы хотите, чтобы они центрировались. Если ваш <h1>
имеет, например, float:left;
применяется, добавив text-align: center;
на контейнер не будет центрировать элемент; в этом случае вам нужно будет добавить width:100%; text-align:center;
width:100%; text-align:center;
к фактическому элементу <h1>
.
Свойство text-align в CSS используется для выравнивания внутреннего содержимого элемента блока. CSS-уловок
Элемент <h1>, по умолчанию, является элементом уровня блока. Поэтому он заполняет всю доступную ширину и обычно запускается на новой строке.
<!doctype html>
<html lang="en">
<meta charset="UTF-8">
<head>
<style>
h1 { text-align:center;}
</style>
<head>
<body>
<div class="container">
<h1>This is a centered header.</h1>
</div>
</body>
<html>
Как уже упоминалось в некоторых других ответах, обратите внимание, что при применении свойства и значения "text-align: center" к любому элементу все дочерние элементы наследуют свойство "text-align" с центром значений, если специально не отменено,
Например:
<style>
.container {text-align:center;}
</style>
<div class="container">
<h1>This is a centered header.</h1>
<h4>All of the other content on your site</h4>
<p>Will be centered, because it falls within the .container </p>
<ul>
<li>Including:</li>
<li>nested elements</li>
</ul>
</div>
Он будет отлично работать для всех элементов блока, которые не изменяются с помощью float
или display
. В частном случае это важно, если есть какие - либо другие материалы в .container
, который не должен быть центром. Затем вы должны использовать второй код. Даже если вы хотите расширить свой код, он делает это, потому что это более чистый код.