Центрируйте блок контента, если вы заранее не знаете его ширину

Question

После множества попыток и поисков я так и не нашел удовлетворительного способа сделать это с помощью CSS2.

Простой способ добиться этого — обернуть его в удобный <table> как показано в примере ниже.Знаете ли вы, как это сделать, избегая макетов таблиц и причудливых приемов?

table {
  margin: 0 auto;
}

<table>
  <tr>
    <td>test<br/>test</td>
  </tr>
</table>

---

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

Answer 1

@Джейсон, да, <center> работает.Хорошие времена.Хотя я предложу следующее:

body {
  text-align: center;
}

.my-centered-content {
  margin: 0 auto; /* Centering */
  display: inline;
}

<div class="my-centered-content">
  <p>test</p>
  <p>test</p>
</div>

РЕДАКТИРОВАТЬ @Santi, элемент уровня блока заполнит ширину родительского контейнера, поэтому фактически он будет width:100% и текст переместится влево, оставив бесполезную разметку и нецентрированный элемент.Возможно, вы захотите попробовать display: inline-block;.Firefox может жаловаться, но это верно.Также попробуйте добавить border: solid red 1px; в CSS .my-centered-content DIV, чтобы увидеть, что происходит, когда вы пробуете эти вещи.

Answer 2

Это будет самый отстойный ответ, но он работает:

Используйте устаревший тег <center>.

:П

Я говорил тебе, что это будет глупо.Но, как я уже сказал, это работает!

*вздрагивает*

Answer 3

Я думаю, что ваш пример будет работать так же хорошо, если вы используете <div> вместо <table>.Единственное отличие состоит в том, что текст в <table> также центрируется.Если вы тоже этого хотите, просто добавьте выравнивание текста:центр;правило.

Еще следует иметь в виду, что <div> по умолчанию заполняет все доступное горизонтальное пространство.Поместите границу, если вы не уверены, где она начинается и заканчивается.

Answer 4

Следующее работает достаточно хорошо.Обратите внимание позиция, и использование авто

<div style="border: 1px solid black; 
            width: 300px; 
            height: 300px;">
            <div style="width: 150px; 
                        height: 150px; 
                        background-color: blue;
                        position: relative;
                        left: auto;
                        right: auto;
                        margin-right: auto;
                        margin-left: auto;">
             </div>
</div>

ПРИМЕЧАНИЕ:не уверен, что это работает в IE.

Answer 5

В FF3 вы можете:

<div style="display: table; margin: 0px auto 0 auto;">test<br>test</div>

Преимущество этого метода заключается в использовании любого элемента, который имеет наибольший семантический смысл (при необходимости замените div на что-то лучшее), но недостатком является то, что в IE это не работает (грр...)

Кроме этого, без установки ширины лучше всего использовать JavaScript для точного позиционирования левого края.Однако я не уверен, что вы бы назвали это «причудливым трюком».

Конечно, это действительно зависит от того, что вы хотите сделать.Учитывая ваш простой тестовый пример, div с выравниванием по тексту:центр будет иметь точно такой же эффект.

Answer 6

#wrapper {
  width: 100%;
  border: 1px solid #333;
}
#content {
  width: 200px;
  background: #0f0;
}

<div id="wrapper" align="center">
  <div id="content" align="left"> Content Here </div>
</div>