Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS |
6.0+ | 1.0+ | 4.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+ |
Завдання
Вирівнювання таблиці по центру горизонталі вікна браузера.
Рішення
Вирівнювання таблиці працює лише в разі, коли явно задана її ширина і вона менше 100%. При дотриманні цих умов для селектора table слід задати властивість margin зі значенням auto. Воно означає, що відступи від таблиці обчислюються автоматично, це як раз і призводить до її центрування (приклад 1).
Приклад 1. Використання margin
HTML5CSS 2.1IECrOpSaFx
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Таблиця в центрі вікна</title> <style> table { width: 300px; /* Ширина таблиці */ border: 1px solid green; /* Рамка навколо таблиці */ margin: auto; /* Вирівнюємо таблицю по центру вікна */ } td { text-align: center; /* Вирівнюємо текст по центру осередки */ } </style> </head> <body> <table> <tr> <td>Бовдур</td> <td>Бувалий</td> </tr> <tr> <td>Боягуз</td> <td>Шурко</td> </tr> </table> </body> </html>
Результат цього прикладу показано на рис. 1.
Рис. 1. Вирівнювання таблиці за допомогою стилів