CSS способ горизонтально выровнять таблицу

Я хочу показать таблицу фиксированной ширины в центре окна браузера. Сейчас пользуюсь

Но Visual Studio 2008 выдает предупреждение в этой строке:

Атрибут 'align' считается устаревшим. Более новая конструкция рекомендуется.

Какой стиль CSS я должен применить к таблице, чтобы получить тот же макет?

вопрос задан 19.11.2008
Alexander Prokofyev
21798 репутация

8 ответов


  • 177 рейтинг

    Стивен прав, в теории :

    «правильный» способ центрировать таблицу с помощью CSS. Соответствующие браузеры должны центрировать таблицы, если левые и правые поля равны. Самый простой способ сделать это - установить для левого и правого поля значение «auto». Таким образом, можно написать в таблице стилей:

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

    Но статья, упомянутая в начале этого ответа, дает вам другой способ центрировать таблицу.

    Элегантное кросс-браузерное решение CSS: Это работает как в MSIE 6 («Причуды и стандарты»), так и в Mozilla, Opera и даже в Netscape 4. x без установки каких-либо явных значений ширины:

    div.centered 
    {
        text-align: center;
    }
    
    div.centered table 
    {
        margin: 0 auto; 
        text-align: left;
    }
    
    
    
            
    ответ дан VonC, с репутацией 807261, 19.11.2008
  • 13 рейтинг

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

    ответ дан jalbert, с репутацией 2406, 19.11.2008
  • 2 рейтинг

    Простой. IE6 и выше будут с успехом центрировать вашу таблицу с "margin: 0 auto;" если только страница отображается в «стандартном» режиме. Чтобы это произошло, вам нужно правильное объявление типа документа, например

    
    

    или

    
    

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

    Удачного кодирования!

    РЕДАКТИРОВАТЬ: Извините, я, возможно, должен указать, что вам не нужно иметь "строгий" doctype, чтобы получить IE6 и перейти в "стандартный" режим рендеринга. Я понял, что это может показаться таким образом из примеров doctype, которые я разместил выше. Например, эта декларация типа документа, конечно, будет работать одинаково:

    
    
    ответ дан Ola Tuvesson, с репутацией 3688, 19.11.2008
  • 2 рейтинг

    Хотя это может быть ересью в современном мире - в прошлом вы делали следующий код без CSS. Это работает во всем, включая современные браузеры, но, как я уже сказал, это ересь в современном мире:

    ...
    
    

    То, что вам нужно, это какой-то способ сказать, что вы хотите центрировать таблицу, и человек использует более старый браузер. Затем вставьте "& lt; center & gt;" команды вокруг стола. В противном случае - используйте CSS.

    Удивительно - если вы хотите центрировать все в области ТЕЛА - вы можете просто использовать стандарт

    text-align: center;
    

    css команда и в IE8 (по крайней мере) она будет центрировать все на странице, включая таблицы.

    ответ дан Mark Manning, с репутацией 1005, 22.11.2015
  • 0 рейтинг
    style="text-align:center;" 
    

    (я думаю)

    или вы можете просто проигнорировать это, он все еще работает

    ответ дан Steven A. Lowe, с репутацией 52561, 19.11.2008
  • 0 рейтинг

    Это должно работать:

            
    ответ дан Matt Howell, с репутацией 12851, 19.11.2008
  • 0 рейтинг
    
    
    Item1 Item2
    ответ дан Chandra Shekhar Sharma, с репутацией 9, 19.12.2013
  • 0 рейтинг

    Я только изучаю это, и что, наконец, сработало для меня, это сначала создать таблицу из трех строк. Установите поля для левого и правого рядов до 50%. Затем поместите одну строку таблицы фиксированной ширины внутри «таблицы данных» центральной «строки таблицы».

    ответ дан Ola Tuvesson, с репутацией 3688, 2.10.2009