Как я могу вертикально выровнять <table>в середине фиксированной высоты <div>? - PullRequest
Новая
       30

Как я могу вертикально выровнять <table>в середине фиксированной высоты <div>?

6 голосов
/ 31 октября 2010

Почему приведенный ниже код не приводит к выравниванию по вертикали <table> в середине <div>? 

<div style="width: 850px; height: 470px;vertical-align: middle;" align="center">
        <table style="padding-left: 20px; width: 700px; border: 10px groove #0033CC; background-color: #F9F9F9;">
            <tr>
                <td>
                    &nbsp;
                </td>
                <td>
                    &nbsp;
                </td>
                <td>
                    &nbsp;
                </td>
            </tr>            <tr>
                <td>
                    &nbsp;
                </td>
                <td>
                    &nbsp;
                </td>
                <td>
                    &nbsp;
                </td>
            </tr>
            <tr>
                <td>
                    &nbsp;
                </td>
                <td>
                    &nbsp;
                </td>
                <td>
                    &nbsp;
                </td>
            </tr>
        </table>
    </div>

Я хочу <table> в середине <div> но это наверху!Как я могу это исправить?

Спасибо за ваш будущий совет.

Ответы [ 4 ]

6 голосов
/ 31 октября 2010

За пределами ячеек таблицы vertical-align устанавливает вертикальное выравнивание текста внутри строки, а не вертикальное выравнивание целых элементов, таких как ваша таблица.

Однако, если вы установите display: table-cell; на <div>, это, кажется, дает желаемый эффект.

Я не уверен, сколько браузеров поддерживают это.Я проверил в Chrome 6, Firefox 2 и Opera 10.5, и они в порядке с этим.Internet Explorer может быть другим вопросом.

0 голосов
/ 17 октября 2016

попробуйте это: 

#centerAligned{
    text-align: center;
    margin-top: 50%;
}

у меня это сработало !!

0 голосов
/ 03 января 2015

Это легко.Всегда используйте этот стиль >> style = "vertical-align: middle" << внутри каждого TD.Вы можете использовать верх, середину и низ.Вы также можете вставить это в CSS. </p>

0 голосов
/ 01 ноября 2010

Попробуйте это: 

<body style="vertical-align:middle">
<table style="display:inline-block">
<!-- your stuff -->
</table>
</body>

table является блочным элементом. Чтобы его выровнять по вертикали, я думаю, что он должен отображаться как inline. inline-block часто даст вам лучшее из обоих миров в подобных ситуациях. Ура!

...