Как добиться возможности центрирования таблицы без таблиц - PullRequest
Новая
       5

Как добиться возможности центрирования таблицы без таблиц

4 голосов
/ 09 июля 2010

Для меня одной из самых полезных функций table s является то, что их ширина подстраивается под его содержимое.

Вы можете очень легко сделать такие вещи, как: 

<table align=center style="border: 1px solid black">
<tr><td style="padding: 20px">
some text here
</table>

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

Вы можете добиться чего-то похожего для обычных элементов блока, используя свойство float CSS, то есть их ширина регулируется в соответствии с его содержимым. Но элемент не будет центрирован.

Итак, вопрос: как вы можете отцентрировать элемент блока и сделать этот элемент для настройки его ширины в соответствии с его содержимым кросс-браузерным способом?

Ответы [ 5 ]

1 голос
/ 09 июля 2010

Современный способ - указать display:table, а обходной путь для IE - это родительский элемент и выравнивание текста: центр по inline/inline-block: 

<div id="for-ie">
<div id="el">whatup son</div>
</div>

<style>
#el { 
display:table;
margin:0 auto;
}

/* for IE, throw this in a CC */
#for-ie { text-align:center; }
#el { 
zoom:1;
display:inline;
}
</style>

Демо

Вот краткое руководство по этой теме, которое я написал: http://work.arounds.org/centering-block-level-element-variable-width/

Я увеличу его, когда не буду спать.

1 голос
/ 09 июля 2010

Если вы намереваетесь отобразить какой-то текст в середине страницы, вы можете использовать что-то вроде этого: 

<div style="text-align:center;">
    <div style="background:red;display:inline;">
        Hello World!
    </div>
</div>

Первый блок будет выравнивать содержимое по центру.Второй заполнит высоту, равную его содержанию, так как display:inline заставит блок <div/> вести себя как <span/>, т.е.отрегулируйте его ширину в соответствии с содержимым, а не с оставшимся пространством.

Обратите внимание, что это ограничивается только однострочным текстом (например, «некоторый текст здесь»).

1 голос
/ 09 июля 2010

Цитирование CSS: полное руководство от Эрик Мейер

Если для обоих полей установлено значение auto, как показано в приведенном ниже коде, то ониустанавливаются равными по длине, таким образом центрируя элемент внутри его родителя: 

p {width: 100px; margin-left: auto; margin-right: auto;}

Установка обоих полей равной длины - это правильный способ центрировать элементы, в отличие от использования выравнивания текста.(выравнивание текста применяется только к встроенному содержимому элемента уровня блока, поэтому установка выравнивания текста по центру элемента не должна центрировать его.)

На практике только браузеры, выпущенные после февраля1999 год правильно обрабатывает автоцентрирование полей, и не все из них делают это правильно.Те, которые не обрабатывают автоматические поля правильно, ведут себя непоследовательно, но самая безопасная ставка - предположить, что устаревшие браузеры сбросят оба поля на ноль.

Однако,

Одна из наиболее пагубных ошибок в IE / Win через IE6 заключается в том, что он действительно обрабатывает text-align: center, как если бы он был элементом, и центрирует элементы так же, как и текст.Это не происходит в стандартном режиме в IE6 и более поздних версиях, но сохраняется в IE5.x и более ранних версиях.

0 голосов
/ 09 июля 2010

Боже мой, мисс Молли!Эти ответы очень сложны.

CSS: 

div.centered {
 width:100%;
 margin:0 auto;
 text-align:center;
}

div.centered span {
 padding:20px;
 border:1px solid #000;
}

И затем используйте это в своем теле: 

<div class="centered"><span>Hello world!</span></div>
0 голосов
/ 09 июля 2010

Используйте этот CSS 

#content {
  position: absolute;
  width: 150px;
  margin-left: -75px;
  left: 50%;
  border: 1px solid #000;
  text-align: center;
  padding: 20px;
}

и этот HTML

некоторый текст здесь
...