Центрируйте блок содержимого, если заранее не знаете его ширину
После множества попыток и поиска я так и не нашел удовлетворительного способа сделать это с помощью CSS2.
Простой способ сделать это - обернуть его в удобный <table>, как показано в примере ниже. Вы знаете, как этого избежать, избегая макетов таблиц и хитрых уловок?
table {
margin: 0 auto;
}<table>
<tr>
<td>test<br/>test</td>
</tr>
</table>Я хочу знать, как это сделать без фиксированной ширины, а также без блока.
Ответы 6
@ Джейсон, да, <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, чтобы увидеть, что происходит, когда вы пробуете эти вещи.
display: inline-block отлично работал в Firefox, но в IE делает ширину 100%
Я думаю, что ваш пример сработал бы так же хорошо, если бы вы использовали <div> вместо <table>. Единственное отличие состоит в том, что текст в <table> также центрируется. Если вы тоже этого хотите, просто добавьте text-align: center; правило.
Также следует иметь в виду, что <div> по умолчанию заполняет все доступное горизонтальное пространство. Обведите его рамкой, если не знаете, где он начинается и где заканчивается.
Следующее работает достаточно хорошо. обратите внимание на позиция и использование авто
<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.
#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>В FF3 вы можете:
<div style = "display: table; margin: 0px auto 0 auto;">test<br>test</div>
У этого есть преимущество использования любого элемента, имеющего наибольший семантический смысл (замените div на что-то лучшее, если это необходимо), но недостаток в том, что он не работает в IE (grr ...)
В остальном, без установки ширины, лучше всего использовать javascript для точного позиционирования левого края. Я не уверен, что вы сочтете это «причудливым трюком».
Конечно, это действительно зависит от того, чем вы хотите заниматься. Учитывая ваш простой тестовый пример, div с text-align: center будет иметь точно такой же эффект.
Мне больше всего нравится метод таблицы, предложенный в вопросе! Возможно, я ошибаюсь, но решение Джо не работает при вложении div внутри других div.