Центрирование содержимого в столбце таблицы с помощью CSS в IE6 / 7 - PullRequest
0 голосов
/ 16 мая 2011

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

-----------------
| Column Header |
-----------------
|    Content    |
|    Content    |
|    Content    |
-----------------

Быстрый поиск нашел решение поместить контент в div с style="diplay:table; margin:auto", однако это не работает в IE6 / 7, так как они не распознают table как режим отображения. Я бы предпочел избегать явной установки width, так как размер содержимого может варьироваться.

Есть ли хак, чтобы сделать это отображение таким же образом в IE6 / 7? В качестве альтернативы, есть ли другой подход, который работает в IE6 / 7 и во всех основных браузерах?

РЕДАКТИРОВАТЬ: Я не могу использовать text-align:center;, поскольку содержимое не является простым текстом.

РЕДАКТИРОВАТЬ 2: Вот простой пример в jsFiddle: http://jsfiddle.net/KK5Bp/. Кнопка отображается в центре под заголовком в нормальных браузерах, но все еще выравнивается по левому краю в IE6 / 7. Мне бы хотелось, чтобы в IE6 / 7 он выглядел так же.

Ответы [ 2 ]

4 голосов
/ 16 мая 2011

Вы пробовали text-align: center на <div> внутри соответствующих ячеек таблицы?

<table>
    <thead>
        <tr>
            <th>Very Long Header</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>
                <div style="text-align: center">
                    <button name="short">short</button>
                </div>
            </td>
        </tr>
    </tbody>
</table>

text-align:center должно работать одинаково в каждом браузере.

http://jsfiddle.net/ambiguous/NYYwd/

0 голосов
/ 16 мая 2011

Вы пробовали margin: 0px auto?Попробуйте и посмотрите, как это будет.

...