Как разместить таблицу в html по центру: Как выровнять таблицу по центру окна браузера?

html — Как выровнять таблицу по центру?

Задать вопрос

Вопрос задан 1 год 10 месяцев назад

Изменён 1 год 10 месяцев назад

Просмотрен 222 раза

HTML:

<table>
        <thead>
            <tr>
                <th><h5>Predictions</h5></th>
                <th><h5>Probability value</h5></th>
            </tr>
        </thead>
        
        <tbody>
            <tr>
                <th>Both to score (yes)</th>
                <td>{{ predictions.both_score_yes }}</td>
            </tr>
            <tr>
                <th>Both to score (no)</th>
                <td>{{ predictions.  both_score_no }}</td>
            </tr>
            <tr>
                <th>Over 2.5</th>
                <td>{{ predictions.over_25 }}</td>
            </tr>
            <tr>
                <th>Under 2.5</th>
                <td>{{ predictions.under_25 }}</td>
            </tr>
            <tr>
                <th>1X</th>
                <td>{{ predictions.1x_team1 }}</td>
            </tr>
            <tr>
                <th>X2</th>
                <td>{{ predictions.x2_team2 }}</td>
            </tr>
            <tr>
                <th>{{ predictions.name_team1 }} score</th>
                <td>{{ predictions.score_yes_team1 }}</td>
            </tr>
            <tr>
                <th>{{ predictions.name_team2 }} score</th>
                <td>{{ predictions.score_yes_team2 }}</td>
            </tr>
            <tr>
                <th>{{ predictions.
  name_team1 }} over 2.5</th>
                <td>{{ predictions.ind_total_over_25_team1 }}</td>
            </tr>
            <tr>
                <th>{{ predictions.name_team1 }} under 2.5</th>
                <td>{{ predictions.ind_total_under_25_team1 }}</td>
            </tr>
            <tr>
                <th>{{ predictions.name_team2 }} over 2.5</th>
                <td>{{ predictions.ind_total_over_25_team2 }}</td>
            </tr>
            <tr>
                <th>{{ predictions.name_team2 }} under 2.5</th>
                <td>{{ predictions.ind_total_under_25_team2 }}</td>
            </tr>
        </tbody>
    </table>

CSS:

.table {
    width: 500px;
    margin: 0;
}
.table td {
    text-align: center;
}

Почему то смещается влево

Как выровнять чтобы была по центру ?

• html
• css
• bootstrap

почти так, только допиши здесь «margin: 0 auto;»

1

Зарегистрируйтесь или войдите

Регистрация через Google

Регистрация через Facebook

Регистрация через почту

Отправить без регистрации

Почта

Необходима, но никому не показывается

Отправить без регистрации

Почта

Необходима, но никому не показывается

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Как разместить таблицу по центру — Вопрос от Олег Крылов #2

• Вопросы
• Горячие
• Пользователи
• Вход/Регистрация

>

Категории вопросов

Задать вопрос +

Основное

• Вопросы новичков (16574)
• Платные услуги (2142)
• Вопросы по uKit (82)

Контент-модули

• Интернет-магазин (1438)
• Редактор страниц (236)
• Новости сайта (500)
• Каталоги (809)
• Блог (дневник) (113)
• Объявления (295)
• Фотоальбомы (434)
• Видео (255)
• Тесты (60)
• Форум (578)

Продвижение сайта

• Монетизация сайта (220)
• Раскрутка сайта (2459)

Управление сайтом

• Работа с аккаунтом (5342)
• Поиск по сайту (427)
• Меню сайта (1767)
• Домен для сайта (1536)
• Дизайн сайта (13484)
• Безопасность сайта (1485)
• Доп. функции (1308)

Доп. модули

• SEO-модуль (225)
• Опросы (63)
• Гостевая книга (99)
• Пользователи (433)
• Почтовые формы (318)
• Статистика сайта (198)
• Соц. постинг (213)
• Мини-чат (91)

Вебмастеру

• JavaScript и пр. (645)
• PHP и API на uCoz (236)
• SMS сервисы (10)
• Вопросы по Narod. ru (429)
• Софт для вебмастера (39)

…

html — Как разместить таблицу в центре страницы с помощью CSS?

Я использую следующий код. Как поместить эту таблицу в центр страницы с помощью CSS?

 
    <голова>
        
        
        
    
    <тело>
        <таблица>
            
                <тд><кнопка>
                <тд><кнопка>
                <тд><кнопка>
                <тд><кнопка>
                <тд><кнопка>
                <тд><кнопка>
                <тд><кнопка>
                <тд><кнопка>
            
        
    

 

• html
• css
• html-таблица
• центр

4

Редактировать для 2022: Flexbox Пожалуйста

Используйте Flexbox, инструкции здесь: https://developer. mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Aligning_Items_in_a_Flex_Container

 .box {
  цвет фона: красный;
  дисплей: гибкий;
  выравнивание элементов: по центру;
  выравнивание содержимого: по центру;
  высота: 400 пикселей;
  ширина: 400 пикселей;
}
.box раздел {
  цвет фона: синий;
  ширина: 100 пикселей;
  высота: 100 пикселей;
}
       

 <дел>
  <дел>