Центрирование текста в HTML - PullRequest
4 голосов
/ 09 мая 2009

Поначалу я знаю, что это кажется очень глупым вопросом, но у меня есть веская причина задать его. Даже если меня могут ввести в заблуждение.

Когда-либо я использовал тег <center>Text</center>, чтобы текст отображался по центру по горизонтали.

Видимо, этот тег устарел и больше не используется. Итак, я попытался использовать <p align="center">Text</p>, хотя, похоже, он содержит ошибки, и я прочитал, что он работает не во всех браузерах.

Кроме того, когда у меня есть тег <h#> заголовка внутри тега <p>, также возникает проблема проверки.

Суть в том, что я хочу сделать это правильно, и хотя центральная метка терпима, это, очевидно, не лучший путь. Почему это было амортизировано? А какая у вас альтернатива? Я, честно говоря, понятия не имею, куда идти отсюда.

P.S. Задание этого вопроса убивает меня изнутри.

EDIT ::

Даже при использовании принятого ответа;

<p style="text-align:center"></p>

Я не могу центрировать <h> теги в тегах <p>. Я пробовал и читал, что <h# align="center"> не работает во всех браузерах, и я пытался применить стиль к тегу заголовка безрезультатно. Что ты думаешь?


Ответы [ 15 ]

12 голосов
/ 09 мая 2009

Выравнивание текста должно быть объявлено в CSS. Вы можете сделать это в разделе CSS вверху файла, в отдельном файле или в самом элементе. Простейшим методом будет последний (обратите внимание, что этот метод обычно не считается хорошей практикой):

<p style="text-align: center">Text</p>

Если вы хотите поместить его в верхнюю часть HTML-файла, это будет выглядеть так:

<head>
<style type="text/css"> 
<!-- 
p.centered
{
  text-align:center;
}

--> 
</style>
</head>
<body>
...
  <p class="centered">Text</p>
</body>

Лучший способ - создать отдельную таблицу стилей CSS, содержащую CSS. Затем добавьте ссылку на CSS в разделе <head></head> вашего html:

<head>
<link href="path/to/file/name.css" rel="stylesheet" type="text/css" />
</head>
2 голосов
/ 09 мая 2009

Относительно тега <h#> внутри тега <p>, это действительно проблема проверки.

<h#> теги предназначены для разметки заголовков. <p> теги предназначены для разметки абзацев.

Итак, если бы я отмечал ваш вопрос, я мог бы начать так:

<h2>Centering Text in HTML</h2>

<p>I know at first this seems like a very stupid question, but I have a good reason for asking it. Even though I might just be misled.</p>

Если бы я хотел, чтобы заголовок был выровнен по центру, я бы снова использовал CSS:

<h2 style="text-align: center;">Centering Text in HTML</h2>

<p>I know at first this seems like a very stupid question, but I have a good reason for asking it. Even though I might just be misled.</p>
2 голосов
/ 09 мая 2009

Чтобы ответить на подразумеваемый второй вопрос, причина, по которой у вас возникают проблемы с проверкой, когда у вас есть внутри

, заключается в том, что вложенные заголовки внутри абзацев недопустимы в HTML 4.0 и XHTML.

Таким образом, заголовки и абзацы являются семантическими понятиями, предназначенными для информирования структуры вашего документа и не подразумевают ничего о внешнем виде их содержимого (предоставляется, по умолчанию они выглядят по-разному, но это не является целью их использования). Отсюда следует, что заголовок не должен содержаться в абзаце.

Если ваша реализация требует вложения заголовков внутри абзацев, вы, возможно, захотите переосмыслить свой подход к тому, что вы пытаетесь достичь. Если целью является структурное указание «это заголовок», подумайте, почему заголовок будет внутри абзаца. Если вы хотите, чтобы определенный текст в абзаце выглядел по-другому, вам нужно использовать один из встроенных элементов, таких как span или em, со связанным стилем CSS.

2 голосов
/ 09 мая 2009

попробуй <p style="text-align: center;">Text</p>

или в верхней части вашего HTML вы можете объявить:

<style type="text/css">
.center { text-align: center; }
</style>

, а потом просто примените класс:

<p class="center">Text</p>

только помните, что свойство text-align css будет работать для элементов блока.

2 голосов
/ 09 мая 2009

Политически корректный способ сделать это - CSS.

Попробуйте сделать что-то вроде:

<p style="text-align:center">Text</p>

Или, что еще лучше, используйте таблицу стилей CSS.

На самом деле, вам не следует использовать встроенный CSS, он такой же небрежный. Вы можете определить стиль для всех тегов <p> или прикрепить класс, например <p class="header", и определить класс header в CSS, например:

p.header { text-align: center }

Таким образом, ваш стиль отделен от вашего HTML, создавая намного более чистый HTML-файл.

2 голосов
/ 09 мая 2009
<p style="text-align:center;">Some Text Here</p>

Это поможет тебе

1 голос
/ 09 мая 2009

Помимо вопроса о том, чтобы отделить (... или нет) стили от контента, стоит упомянуть, что «официальный» отказ от HTML не означает, что он работает не так хорошо, как раньше. Учитывая то, как работают и развиваются браузеры, ваш центральный тег будет работать некоторое время, возможно, до самого конца использования HTML. : -)

То есть измените его, если считаете, что это правильно, но не тогда, когда считаете, что оно больше не работает. Плюс: удалить его, если он работает, а альтернативы нет ... ну, я бы сам не изменил.

1 голос
/ 09 мая 2009

Если вы хотите центрировать текст, вы можете сделать это с помощью декларации css «text-align: center»:

<div style="text-align:center;">Centered Text</div>

Если вы хотите центрировать элемент, вы бы задали ему ширину и установили «margin: 0 auto» следующим образом:

<div style="width: 100px; margin: 0 auto;>whole div will be centered</div>
0 голосов
/ 09 мая 2009
<head>
    <style type="text/css"> 
    <!-- 

    div.content,
    div.content h1,
    div.content h2,
    div.content h3,
    div.content h4,
    div.content h5,
    div.content h6 {
        text-align:center;
    }
    --> 
    </style>
</head>
<body>
  <div class="content"><h2>Text</h2></div>
</body>

Вы можете сделать это, если хотите, чтобы теги h тоже центрировались, и они верны ... Не помещайте теги H в тег P.

0 голосов
/ 09 мая 2009

Вы должны перейти на CSS для стиля. HTML / XHTML предназначены исключительно для контента.

<p style="text-align: center;">Paragraph Text</p>

Также я не верю, что теги <h#> должны быть вложены в теги <p>.

Для получения дополнительной информации см. w3schools.com

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...