Как выровнять картинку посередине css

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

Выровнять таблицу по центру горизонтали окна браузера.

Решение

Выравнивание таблицы работает только в случае, когда явно задана её ширина и она меньше 100%. При соблюдении этих условий для селектора table следует задать свойство margin со значением auto . Оно обозначает, что отступы от таблицы вычисляются автоматически, это как раз и приводит к её центрированию (пример 1).

Пример 1. Использование margin

HTML5 CSS 2.1 IE Cr Op Sa Fx

    Таблица в центре окна     Балбес  Бывалый  
 Трус  Шурик

Результат данного примера показан на рис. 1.

Рис. 1. Выравнивание таблицы с помощью стилей

HTML по теме

Не выкладывайте свой код напрямую в комментариях, он отображается некорректно. Воспользуйтесь сервисом cssdeck.com или jsfiddle.net, сохраните код и в комментариях дайте на него ссылку. Так и результат сразу увидят.

Как выровнять DIV с position: absolute по центру TD?

Всем доброго времени. Необходимо отцентровать DIV с выставленным position: absolute в центре TD.
Для TD делаю text-align: center; position: relative;
Для DIV делаю position: absolute; margin-top: -0.625em; (1 строчка текста).
Вертикально DIV центрируется, а вот по горизонтали не получается.

Вопрос задан более трёх лет назад
43714 просмотров

Комментировать
Решения вопроса 1

Вы не особо понимаете для чего нужен absolute и как его использовать.
Что б выровнять абсолютный элемент по центру родителя:
top:50%;
left:50%;
transform:translate(-50%, -50%);

Ответ написан более трёх лет назад
Нравится 20 3 комментария
A.Politik @apthur Автор вопроса
Спасибо! Помогло! Во истину transform:translate(-50%, -50%);

space2pacman

Ярослав Иванов @space2pacman Куратор тега CSS

top:50%; left:50%; transform:translate(-50%, -50%);

left:0; right:0; top:0; bottom:0; margin: auto;

скажите какой метод подойдет если 3 блока и стоят уже в линию по горизонту как их центрировать?
.block div <
line-height: 80px;
font-size: 18px;
font-weight: 900;
text-align: center;
color: #fff;
width: 200px;
display: inline-block;
position: relative;
left:50%; (. )
>

Ответы на вопрос 0
Ваш ответ на вопрос

Войдите, чтобы написать ответ

html

HTML
+1 ещё

Как пофиксти проблему с амперсантом?

1 подписчик
11 часов назад
54 просмотра

Верстка: как разместить текст по центру относительно картинки?

Нужно разместить текст по центру относительно картинки. vertical-align: middle; почему-то не помогло, даже если задать родительскому блоку фиксированную длину.

Отслеживать
51.2k 86 86 золотых знаков 266 266 серебряных знаков 505 505 бронзовых знаков
задан 25 мар 2012 в 8:15
681 3 3 золотых знака 11 11 серебряных знаков 35 35 бронзовых знаков
высота картинки постоянна и неизменна? надпись должна быть по центру снизу или по центру справа?
25 мар 2012 в 8:24
а если использовать картинку как бэкграунд?
25 мар 2012 в 8:24

Читать:

Чем отличается read от readline python

1 ответ 1

Сортировка: Сброс на вариант по умолчанию

.header < background-image: URL(//www.gravatar.com/avatar/?s=100); background-repeat: no-repeat; text-align: center; line-height: 100px; font-size: 20px; >

line-height = высоте изображения
font-size = какой нужно размер шрифта
background-repeat: no-repeat; — не повторять картинку, если она размером на весь хидер. Если она из повторяемого кусочка, то не пишем данное свойство.

А vertical-align: middle; с дивами работает, если задать диву табличный стиль отображения display: table . Но в ИЕ6, 7 не работает.

Отслеживать
11.5k 8 8 золотых знаков 42 42 серебряных знака 69 69 бронзовых знаков
ответ дан 25 мар 2012 в 10:14
753 3 3 серебряных знака 7 7 бронзовых знаков

html
вёрстка
css

Важное на Мете

Подписаться на ленту

Лента вопроса

Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.

Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.

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

Используйте стилевое свойство text-align со значением center , добавляя его к абзацу (селектору P ) или к определенному слою (пример 1).

Пример 1. Выравнивание текста

HTML5 CSS 2.1 IE Cr Op Sa Fx

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

Результат примера показан на рис. 1.

Текст, выровненный по центру веб-страницы

Рис. 1. Текст, выровненный по центру веб-страницы

В данном примере текст внутри слоя с именем text выравнивается по центру веб-страницы.