Как я могу центрировать что-то, если я заранее не знаю, какова ширина?

StackOverflow https://stackoverflow.com/questions/963823

  •  12-09-2019
  •  | 
  •  

Вопрос

Я пытаюсь центрировать тег абзаца с некоторым текстом в нем внутри div, но, похоже, я не могу центрировать его с помощью margin:0 автоматически без необходимости указывать фиксированную ширину для абзаца.Я не хочу указывать фиксированную ширину, потому что у меня будет динамический текст, поступающий в тег paragraph, и он всегда будет разной ширины в зависимости от объема текста.

Кто-нибудь знает, как я могу расположить тег абзаца по центру внутри div без необходимости указывать фиксированную ширину для абзаца или без использования таблиц?

Это было полезно?

Решение

Вот как это сделать с помощью таблицы стилей.

Таблица стилей:

div.center-content
{
    text-align: center;
}

div.center-content p
{
    text-align: left;
    margin-left: auto;
    margin-right: auto;
}

HTML:

<div class="center-content">
    <p>Lorem ipsum dolor sit amet</p>
</div>

Другие советы

Помимо свойства "выравнивание текста"

для центрирования элементов внутри блочных элементов, таких как div

используйте css следующим образом

 margin:auto

что-то вроде того, что опубликовано ниже

При вертикальном центрировании лучше использовать таблицы (в большинстве случаев это единственное решение, совместимое с кроссбраузерностью).

вы можете использовать 

 "text-align:center"  

 "vertical-align:middle"

Я думаю, что лучший метод - это поместить элемент в элемент уровня блока и сделать:

.innerElement {margin:0 auto}

Учитывая, что они оба являются элементами уровня блока, у которых нет параметра float , это должно отлично работать!

вот хороший обходной путь для центрирование div без ширины.

не содержит таблиц и работает в любом браузере!

Попробуйте это с помощью встроенного CSS:

<p style="text-align: center;">Lorem ipsum dolor sit amet</p>

Или используя просто HTML

<p align="center">Lorem ipsum dolor sit amet</p>

если div имеет заданную ширину, все, что вам нужно, это

.myDiv { выравнивание текста по центру;}

Также послушайте комментарий Гарри.ни при каких обстоятельствах не используйте встроенный css.

Также еще одно грязное исправление для этого на случай, если у вас есть другие материалы в div для централизации:

ты всегда можешь:

$('.youParagraph или .otherContent').wrap(");

Очевидно, что не практикуйте это, если вы работаете в большой команде и разделение задач является проблемой.

Я надеюсь, что это помогло.

Эх, автоматические поля должны иметь заданную ширину, так как по умолчанию элемент уровня блока, такой как

расширился бы на всю доступную ширину.

Если вы не поддерживаете IE < 8 вы могли бы просто установить { отображать:таблица;маржа:0 авто;}

В противном случае, если ваш элемент окружен элементами уровня блока, вы могли бы выполнить p { display:встроенный блок;} p { отображение:встроенный;} html > /**/ body p { отображать:встроенный блок;} (последние два правила предназначены для IE и сброса IE fix для нормальных браузеров) после этого примените { text-align:центр;} на контейнере.

Как кто-то уже упоминал, смотрите http://haslayout.net/css-tuts/Horizontal-Centering для получения дополнительной информации.

Ваше здоровье!Zoffix Znet

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top