Центр HTML-таблиц внутри обертки

У меня проблема с центрирующими таблицами на странице, которая уже находится под оболочкой. Когда CSS применяется к странице, все выше и ниже выглядит отлично, только таблица находится в центре справа.Центр HTML-таблиц внутри обертки

Если вы посмотрите на ссылку, вы можете увидеть, что я пытаюсь сделать, %%TEXT%% - это глобальные переменные или ссылки на другие более мелкие фрагменты или панели кода.

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

https://jsfiddle.net/173pgh4p/9/

Спасибо

EDIT: Думая о ней, я должен даже использовать таблицу? Я хочу, чтобы они стекались, когда кто-то ходил на сайт на мобильном телефоне, было бы лучше использовать li or ul

источник

2015-05-21 SwampYeti

Пожалуйста, включите соответствующий код в вашем вопросе; кстати: 'margin-left: auto; margin-right: auto; ширина: '? –

Если вы используете таблицу для компоновки, тогда ** нет ** вы даже не должны использовать таблицу. Если в этой таблице содержится список вещей, то да, вы должны использовать элементы 'ul' или' ol' с 'li', которые вы можете затем стилизовать, чтобы выглядеть абсолютно любым способом, в том числе похожим на таблицу. Подумайте, что на вашей странице _ ** есть ** _, а не как _looks_, затем выберите теги и имена классов для соответствия. Веб-страница представляет собой структуру данных - выбирайте хорошие типы и имена, например, для объекта или структуры кода. –

Я только что обновил ссылку, используя [email protected] – SwampYeti

Таблица представляет собой элемент уровня блока. Вы можете расположить его в центре, придав ему:

margin-left:auto; margin-right:auto;

Вы можете сделать это на любой элемент уровня блока, как <ul>, если вы решите пойти по этому пути. Версия shorthan должна быть просто:

margin: 0 auto;

В старых версиях IE (я думаю, что 7 и ниже), вы должны дать родительский элемент выравнивания текста: центр; и элемент блока (например, ваша таблица) text-align: left, чтобы сбросить выравнивание текста.

Я бы избегал использовать таблицы для целей макета, поскольку они раздувают разметку, и их сложнее поддерживать и создавать гибкие макеты. <ul> - хороший выбор.

Без таблицы вам нужно будет вернуть свои столбцы по-другому. Два твердых способа используют float или inline-block. С поплавками вам нужно очистить его потом. Clearfix - мой любимый способ сделать это, вот ссылка, которая объясняет clearfix. https://css-tricks.com/snippets/css/clear-fix/

Inline-block лучше, если вам нужно контролировать вертикальное выравнивание (что-то другое, кроме вертикального выравнивания). Будьте осторожны, потому что в этом месте пространство вашего кода становится важным и будет отображаться на экране. Немного больше об этом: https://css-tricks.com/fighting-the-space-between-inline-block-elements/

источник

2015-05-21 23:03:56

Другие ответы на SO о центрировании говорят о том, что объект, центрированный с помощью поля «margin: auto», должен иметь явно заданную ширину. Вы не упомянули об этом - есть ли у вас случай, когда это не так? –

Насколько я знаю, это верно, для ширины внутреннего контейнера требуется ширина. Если ширина внутреннего элемента охватывает всю ширину его контейнера, тогда автоматическая граница не будет иметь места для работы и, следовательно, будет равна нулю с обеих сторон. В этом примере ее столбцы таблицы (tds) имеют указанную ширину, и таблица естественно устанавливает ее ширину, равную сумме столбцов. Вы можете использовать display: table вместо display: block, чтобы избежать установки явной ширины на элементах, которые не являются

. https://jsfiddle.net/u7v4g6kx/1/. –

В качестве альтернативы вы можете установить выравнивание текста: центр на внешнем контейнере и установить отображение: встроенный блок на внутреннем контейнере –

Вы можете назначить margin: 0 auto; таблице без указанной в ней ширины.

table{ 
 
    background: aliceblue; 
 
    margin: 0 auto; 
 
}

<table> 
 
    <tr> 
 
    <th>Month</th> 
 
    <th>Savings</th> 
 
    </tr> 
 
    <tr> 
 
    <td>January</td> 
 
    <td>$100</td> 
 
    </tr> 
 
</table>

источник

2015-05-22 00:34:11 matthewelsom

Смежные вопросы