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

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>

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

Answer 2

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

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

: Р

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

* Дрожь *

Answer 3

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

вместо

Answer 4

В FF3 вы можете:

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

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

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

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

Answer 5

#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>

Answer 6

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

<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.