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

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

4 голосов
/ 08 июня 2009

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

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

Ответы [ 8 ]

9 голосов
/ 08 июня 2009

Вот как это сделать, используя таблицу стилей.

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

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>
2 голосов
/ 08 июня 2009
1 голос
/ 14 мая 2010

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

без таблицы и работает в любом браузере!

1 голос
/ 22 августа 2009

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

.innerElement {margin:0 auto}

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

1 голос
/ 08 июня 2009

Помимо свойства text-align

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

используйте css как 


 margin:auto

что-то вроде того, что размещено ниже

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

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

 "text-align:center"  

 "vertical-align:middle"
0 голосов
/ 22 августа 2009

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

, будет расширяться на всю доступную ширину.

Если вы не поддерживаете IE <8, вы можете просто установить {display: table; поле: 0 авто; } </p>

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

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

Ура! Zoffix Znet

0 голосов
/ 08 июня 2009

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

.myDiv {text-align: center; }

Также послушайте комментарий Гарри. ни в коем случае не используйте встроенный CSS.

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

всегда можно:

$ ('. YouParagraph или .otherContent'). Wrap ('');

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

Надеюсь, это помогло.

0 голосов
/ 08 июня 2009

Попробуйте использовать встроенный CSS: 

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

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

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