Как центрировать заголовок в зависимости от длины контента?

0

Я хотел бы идеально сосредоточить заголовок моей страницы в ее теле. Для меня это значит:

  1. Поиск размера содержимого в div и установка div в размере содержимого, а затем.
  2. Центрирование этого div внутри тела.

По моему мнению, margin: 0 auto должен центрировать div, а display: inline-block будет устанавливать размер div в размере его содержимого. Ive пробовал это, я не уверен, почему это не работает - кажется, эти два атрибута не играют хорошо друг с другом. Может ли кто-нибудь взглянуть на мой HTML/CSS и посмотреть, знают ли они, что случилось?

HTML:

<body>
    <h1> Hi There! </h1>
</body>

CSS:

h1 {
    display: inline-block;
    margin: 0 auto;
    width: 150px;
}
  • 2
    выравнивания текста: центр;
Теги:

2 ответа

1

попробуйте с этим css:

h1 {
    display: block;
    margin-left:auto;
    margin-right:auto;
    width: 150px;
}

живой пример:

http://jsfiddle.net/SL8up/

Поделиться
0

Проблема заключается в display: inline-block; :

h1 {
    display: inline-block;
    margin: 0 auto;
    width: 150px;
}

Просто измените display на block:

h1 {
display: block;
margin: 0 auto;
width: 150px;
}

<body>
    <div class="header"><h1> Hi There! </h1></div>
</body>

Полный HTML с рабочим встроенным CSS здесь:

<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title></title>
    <style type="text/css">
h1 {
        display: block;
        margin: 0 auto;
        width: 150px;
    }
</style>
</head>
<body>
    <h1> Hi There! </h1>
</body>
</html>
Поделиться
  • 0
    Спасибо за ответ! Одной из причин, по которой я не вижу этой работы, является width: 150px; часть. Для сайта, на котором я пытаюсь центрировать заголовок, содержимое тега h1 генерируется динамически, поэтому я не буду заранее знать его ширину, поэтому я пытался использовать display: inline-block . Могу ли я по-прежнему центрировать заголовок, как я описал в OP, не устанавливая ширину в фиксированное значение?
  • 0
    @CodyMa Нет. display: inline-block не будет работать с этим методом. Это должен быть block .
Показать ещё 1 комментарий

Ещё вопросы

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