Использование CSS для выравнивания элемента управления внутри div

Question

Я хочу выровнять элемент управления GridView по центру в <div>. Но GV, кажется, остается в верхнем левом положении div даже после применения следующих методов:

text-align : center и vertical-align : middle не дают результатов.

Также не position : relative или margin : auto.

<div align="center"> работает для горизонтального выравнивания, но не может найти любую форму valign для <div>.

Макет до сих пор:

<div id="content1" class="contentSingleCenter" >
    <asp:GridView ID="grdGrid" runat="server"></asp:GridView>
</div>

CSS:

div.contentSingleCenter
{
    width : 80%;
    height : 200px;
    position: relative; 
    margin: auto;
}

Мое главное требование - я не могу использовать для этого таблицу.

Есть идеи? ТИА.

Answer 1

Согласно IE9, gridview и formview переводятся в таблицы со строками, столбцами и т. Д. Поэтому для их центрирования используйте:

table
{
margin-left: auto;
margin-right: auto;
}

Answer 2

Я знаю, что это старый поток, но вот что я нашел работающим для меня:

Элемент управления asp: GridView отображается как таблица, вложенная в div.Из-за этого применение стиля непосредственно к элементу управления не дает желаемого результата.Я обнаружил, что применение стиля к дочернему элементу таблицы контейнера div работает лучше всего в моем приложении.На самом деле это просто перестановка ответа JGM выше.

CSS:

.contentSingleCenter table
{
    position: relative;
    margin-left: auto;
    margin-right: auto;
}

Я считаю, что этот метод предпочтительнее принятого ответа, потому что он использует CSS вместо устаревшего атрибута align.

Answer 3

На самом деле, я нашел исправление ... <align="center">, и, кажется, работает небольшой отступ:)

Answer 4

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

div.contentSingleCenter
{
    width : 80%;
    height : 200px;
    position: relative;
    display: table-cell;
    vertical-align: middle; 
    margin: auto;
}

Проверено в современных браузерах и работает довольно хорошо. Вы можете использовать margin-left: auto; margin-right: auto; в сетке для горизонтального центрирования.

Answer 5

использование атрибута line-height может работать для вас, установите его равным высоте div

div.contentSingleCenter
{
    width : 80%;
    height : 200px;
    line-height: 200px; 
    margin: auto;
    text-align:center;
}

Answer 6

Попробуйте line-height: $height_of_box в сочетании с text-align: center, см. http://jsfiddle.net/ugRd3/.

Надеюсь, это поможет.

Answer 7

Вы можете использовать RowStyle-VerticalAlign="Center" and RowStyle-HorizontalAlign="Center" ...