Должен ли `text-align: center;` быть применен к элементу или его родительскому контейнеру?

0

Я пытаюсь сосредоточить элемент.

Если text-align: center; применяется к элементу или его родительскому контейнеру?

Учитывая это:

<div class="container">
    <h1>This is a centered header.</h1>
</div>

... я должен написать это:

.container {
    text-align: center;
}

...или это:

.container h1 {
    text-align: center;
}
  • 0
    Ответ зависит от того, что вы пытаетесь сделать.
  • 0
    @Arbel Я пытаюсь центрировать элемент.
Показать ещё 1 комментарий
Теги:

4 ответа

1
Лучший ответ

Оба будут работать. Попробуйте это - здесь JS Fiddle: http://jsfiddle.net/a4jmB/

.container {
    text-align: center;
}

Это устанавливает, чтобы весь текст в родительском div был центрирован.

.container h1 {
    text-align: center;
}

Это устанавливает весь текст в h1 div для центровки. В основном h1 занимает всю ширину строки независимо от настройки css, поэтому текст будет центрирован.

Второй вариант, вероятно, предпочтительнее, поскольку он применим только к h1 div, а не к любому другому тексту, который может быть в контейнере.

1

Любой из них будет работать, если оба их макета позволяют им охватить пространство, в котором вы хотите, чтобы они центрировались. Если ваш <h1> имеет, например, float:left; применяется, добавив text-align: center; на контейнер не будет центрировать элемент; в этом случае вам нужно будет добавить width:100%; text-align:center; width:100%; text-align:center; к фактическому элементу <h1>.

0

Свойство 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" с центром значений, если специально не отменено,

Значения Inherited-Property W3C

Например:

<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>
0

Он будет отлично работать для всех элементов блока, которые не изменяются с помощью float или display. В частном случае это важно, если есть какие - либо другие материалы в .container, который не должен быть центром. Затем вы должны использовать второй код. Даже если вы хотите расширить свой код, он делает это, потому что это более чистый код.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню