В этой статье мы коснемся вопроса выравнивания по центру различных элементов html при помощи css свойств.

Довольно часто появляется необходимость выровнять div по центру или выровнять его содержимое. Существует несколько способов это сделать. Некоторые способы подходят для выравнивания текста, картинок и другого, но не подходят для выравнивания блоков.

Для начала рассмотрим варианты для выравнивания содержимого блоков, такое как изображения, текст. Этот метод подходит почти ко всем элементам.

В этом случае все просто - для родительского элемента задаем свойство text-align со значением center . Такой способ выровнять текст по центру при помощи css самый простой и удобный. Для более глубокого понимания приведу пример. Важно осозновать, что в этом случае по центру у нас выравнивается только содержимое.

HTML -код:

Страница

Какой-то текст, выравненный по центру для родительского элемента body

CSS -код:

body {text-align:center;} /*выравниваем содержимое body по центру*/

С самым простым - выравниванием текста и изображений при помощи css по центру страницы мы разобрались.

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

Всего я предлагаю два варианта при помощи CSS : используя свойство margin и используя свойства position c left . Важно заметить, что ни один из этих способов не будет работать, если у вас не задана фиксированная ширина элемента, не важно в px , % или чем ещё.

Таким образом, первым делом решаем, в каких единицах и какая будет ширина элемента, который мы хотим выровнять по центру.

Выравнивание по центру при помощи margin

Для метода при помощи margin не важно, в процентах или пикселях вы задает эту ширину. Для центрирования по этому методу, вам нужно в качестве значений свойства margin поставить следующие 0 auto . Если более конкретно, то для боковых отступов значение должно быть auto , а для верхнего и нижнего можно задавать любые внешние отступы. Т.е. развернутый вариант значения выглядит так 0 auto 0 auto , либо так 10px auto 5% auto .

Таким образом выставлять внешние отступы для верха и низа элемента можно, а боковые обязательно должны стоять в auto .

Это, пожалуй, наиболее универсальный и удобный способ, чтобы div был выровнен по центру или любой другой элемент.

HTML -код:

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

CSS -код:

body {text-align:center;} div {padding:10px; color:#FFFFFF;} div.centr { background:#003300; width:300px; /*фиксированная ширина через пиксели*/ margin:10px auto 0 auto; /*внешние отступы, выравнивающие блок по центру и отступая сверху на 10 px*/ } div.centrall { background:#990000; width:30%; /*фиксированная ширина через проценты*/ margin:2% auto 0 auto; /*внешние отступы, выравнивающие блок по центру и отступая сверху на 2%*/ text-align:center; }

Выравнивание по центру при помощи position и left

Такой вариант подойдет не для любого элемента.

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

Во-вторых, родительскому тэгу должно быть задано свойство position с значением relative/absolute/fixed , любым из перечисленных.

Теперь нужно так же задать любое из этих значений свойства position для выравниваемого элемента. Потом взять 100 вычесть ширину этого элемента и поделить получившееся число на 2. Получившееся значение и будет тем, которое нужно указать для left (стоит отметить, что это свойство можно заменить на right , как обычно это не существенно). Благодаря таким свойствам нужный div или таблица будут размещены по центру родительского элемента.

Как это работа? Свойство position тут нужно, чтобы свойство left отсчитывалось от левой границы родительского элемента не экрана, хотя иногда подходит вариант с отсутствием заданного свойства position для родителя. После чего мы просто задаем такое значение свойству left , чтобы левая граница размещалась на половине ширины от всей ширины родительского элемента за вычетом ширины самого блока.

Посмотрите сами, как это работает.

HTML -код:

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

CSS -код:

body {position:relative;} div {padding:10px; color:#FFFFFF; position:relative;} div.centrall { background:#990000; width:20%; /*фиксированная ширина через проценты*/ text-align:center; left:40%; /*отступ от левого края родительского элемента*/ }

Здравствуйте, дорогие читатели моего сайта. Сегодня я расскажу Вам, как выровнять картинки по центру на Вашем сайте.

Для начала немного теории, чтобы все Вы понимали откуда ноги растут. Дело в том, что - это строчный элемент и правильнее было бы его выравнивать при помощи атрибута align, НО! Как мы знаем, чем больше в коде сайта у нас напихано всяческих атрибутов, тем труднее нам будет управлять внешним видом. Все время придется выискивать эти атрибуты и править их.

Собственно, для упрощения нашей дизайнерской работы и придуман был язык стилевой разметки под названием Css. И если можно все делать гораздо проще, то почему бы этим не воспользоваться? Ведь за нас уже давно придумали более простые способы оформить документы веб-ресурса и глупо было бы это игнорировать и не применять.

Ну, к черту лирику, давайте начинать разбираться.

Для начала создам тестовую папку. Положу туда index.html, style.css (файл со стилями) и файл-картинку. Далее создадим "скелет" нашего сайта в индексном файле:

В Css выравнивание элементов осуществляется, как правило, при помощи свойства margin. Но оно работает только для блочных элементов. Как я уже говорил, - элемент строчный. Как же нам сделать так, чтобы наша картинка стала блочной?

Для этого есть волшебное свойство display, которое имеет множество значений, которые позволяют указать браузеру, каким образом ему воспринимать те или иные элементы страницы. По умолчанию у элемента display:inline;, что означает, что этот он строчный. Но в Css мы можем изменять представление того или иного элемента. Написав display:block;, мы говорим браузеру, что данный элемент нужно обрабатывать, как блочный. Так и запишем в нашем файле со стилями.

Далее нужно указать наш margin. Значение у него должно быть "0 auto". Таким образом сверху и снизу отступов не будет, а значение "auto" говорит о том, что отступы по краям будет высчитывать браузер по своей формуле. Я в рассчетах браузера плохо разбираюсь, но догадываюсь, что он смотрит, что никаких конкретных отступов слева и справа нет, а стоит auto. Если auto - это некая переменная, то auto справа равно auto слева. Вот и получается, что браузер откладывает два одинаковых расстояния.

Таким образом, у нас получилось в файле css следующее:

Таким образом получаем картинку, выровненную по центру.

Стоит добавить, что если элемент не имеет фиксированной ширины, то тогда ее нужно задать принудительно! Иначе элемент не выровняется по центру.

Вот и все. Удачной Вам верстки!

P.S: Как Вы, наверное уже догадались, все картинки в данном материале выровнены именно таким способом.

NetSurf 2.6+, Hv3.

Горизонтальное выравнивание изображения по центру с помощью CSS. Пример:

HTML / XHTML. Код:

.example {position: relative; left: 0px; top: 0px; height: auto; width: 100%; float: left; padding: 10px; border: 1px #ccc solid; background: #fafafa;}

.example img {display: block; margin: 0 auto;}

CSS свойства контейнера (в данном случае example ) могут быть самые разные, выравнивание изображения по центру создается с помощью стилей, непосредственно относящихся к изображению: .example img {display: block; margin: 0 auto;}.

А так же в Opera 4.0+, если не используется краткая запись CSS свойств. То есть, если код CSS в виде.example img {display: block; margin-left: auto; margin-right: auto;}.

А так же в Netscape 6.01+, Mozilla 0.6+.

Aliosque subditos et thema

1) Горизонтальное и вертикальное выравнивание по центру с помощью CSS - 1 Выравнивание содержимого страницы по центру в видимой области окна браузера с помощью CSS. Контейнер, в котором находится всё содержимое веб-страницы выравнивается по центру - по ширине и по высоте. Для более современных браузеров: [ Подробнее ] : [ Открыть страницу-пример ] 2) Горизонтальное и вертикальное выравнивание по центру с помощью CSS - 2 Выравнивание содержимого страницы по центру в видимой области окна браузера с помощью CSS. Контейнер, в котором находится всё содержимое веб-страницы выравнивается по центру - по ширине и по высоте. Более консервативный, чем предыдущий вариант. Подходит не только для современных браузеров, но и для более старых. Таких как Internet Explorer 6 или ранние версии Maxthon. При необходимости что-то изменить, требует больше усилий, чем первый способ: [ Подробнее ] : [ Открыть страницу-пример ] 3) Горизонтальное выравнивание блока неизвестной ширины Горизонтальное выравнивание блока неизвестной ширины средствами CSS: [ Подробнее ] : [ Открыть страницу-пример ] 4) Position: absolute по центру Горизонтальное выравнивание абсолютно позиционированного элемента по центру с помощью CSS: [ Подробнее ] 5) Изображение по центру CSS Горизонтальное выравнивание изображения по центру с помощью CSS: [ Подробнее ] 6) Вертикальное выравнивание CSS Вертикальное выравнивание CSS блочного элемента, содержащего текст и изображения: [ Подробнее ] 7) Выравнивание по центру с помощью JavaScript и CSS Выравнивание содержимого страницы по центру в видимой области окна браузера с помощью JavaScript и CSS. Контейнер, в котором находится всё содержимое веб-страницы выравнивается по центру - по вертикали и по горизонтали: [ Подробнее ] : Два случая: 1. Контейнер выравнивается по центру, если разрешение экрана монитора равно или больше 1024x768: [ Открыть страницу-пример ] 2. Контейнер выравнивается по центру, если разрешение экрана монитора равно или больше 1024x768 + курсор мыши наводится на ссылку в одном из элементов содержимого страницы: [ Открыть страницу-пример ]

MPlayer: FFmpeg Медиаплееры появились давно, но их расцвет начался с массовым распространением компьютеров достаточно мощных, что бы проигрывать видеофайлы. Это по времени совпало и с массовым распространением операционных систем и вообще софта с графическим интерфейсом. Однако в природе программы с графическим интерфейсом имеется двойственность: есть комплекс кода, который отвечает за графический интерфейс, за внешний вид и есть - за то, что бы выполнялась та задача, ради которой данное приложение вообще было создано. Оба комплекса потребляют системные ресурсы, их реакция на действия пользователя формирует какой-то объем времени ожидания. И в случаях или при концепциях, когда внешний вид признается менее важным - менее важным до степени отказа или почти отказа от него - появляются, помимо прочих, консольные приложения. Кроме того, разделенность GUI и движка позволяет легче менять графический интерфейс или совершать комплекс автоматизированных действий. Эта схема реализуется и в отношении медиаплееров для Windows. MPlayer, например, в обычном виде представляет собой консольное приложение, быстро запускающееся, имеющее быстрый отклик на действия пользователя, потребляющее системные ресурсы почти полностью на свою непосредственную задачу. И уже на эту основу при желании добавляется тот или иной графический интерфейс для создания, в общем, нового приложения. MPlayer - / home page / Консольный медиаплеер для Windows. Основа для SMPlayer и UMPlayer. Существуют версии для Linux, FreeBSD, NetBSD, OpenBSD, Apple Darwin, Mac OS X, QNX, OpenSolaris/Solaris, Irix, HP-UX, AIX, некоторых других *nix систем, BeOS, Syllable, AmigaOS, AROS, MorphOS, DOS, Windows. Поддерживаемые форматы видео, аудио, статичных изображений, субтитров и т.д. (Более полный список видео и аудио кодеков) MPlayer: "Dead Man" MPlayer: "Sky Captain and the World of Tomorrow" MPlayer: "10,000 BC" MPlayer: "13 Tzameti" MPlayer: "The Draughtsman"s Contract" MPlayer: "Женитьба Бальзаминова" FFmpeg - / home page / Набор утилит и библиотек для работы с видео и аудио файлами. Создан в и для Linux, но есть вариант и для Windows. Возможна компиляция под другие операционные системы. Поддерживаемые форматы файлов и кодеки: (Список). Так же, VLC медиаплеер может быть запущен с текстовым интерфейсом, с использованием ncurses.

1 2 3 4 5 6 7 8 9 10 11 12

.outer { height : 100px ; position : relative ; } .outer img { position : absolute ; margin : auto ; left : 0 ; top : 0 ; bottom : 0 ; right : 0 ; }

Height введен только чтобы расширить блок, он может быть динамическим, и картинка всегда будет по центру.

Пример: Вариант 2. Через table-cell

Верстка как и в первом примере:

Здесь тоже высота может быть динамической. Но есть одно НО – ширину блока уже нельзя указать в 100%, должен быть задан width.

Пример: 2. Нам известна высота блока, но не известна высота картинки Способ через line-height. Высота картинки должна быть меньше высоты блока. Пример: Нам известна высота картинки, но неизвестна высота блока Способ через абсолютное позиционирование картинки

Суть этого способа заключается в добавлении картинке position: absolute, отодвигании ее сверху на 50% через свойство top, а потом добавлении отрицательного margin, равного половине высоты этой картинки. Также можно выравнивать картинку и по горизонтали (добавлением свойств top: 50% и margin-top, равного половине ширины картинки).
Верстка.

Задача

Выровнять фотографию с подписью по центру горизонтали веб-страницы.

Решение

Иллюстрации к тексту часто выравнивают по центру веб-страницы, при этом текст располагается до и после изображения. Такое расположение элементов позволяет разбить большой текст на смысловые блоки и привлечь внимание к рисункам.

Вначале рассмотрим выравнивание изображения по центру. Для этого к селектору P следует добавить стилевое свойство text-align со значением center . При этом тег должен располагаться внутри абзаца (тег

). Чтобы не получилось так, что все абзацы на странице начали выравниваться по центру, введем свой класс fig , и все действия будем производить с ним. В примере 1 показано, как это сделать.

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

HTML5 CSS 2.1 IE Cr Op Sa Fx

Выравнивание фотографии по центру .fig { text-align: center; /* Выравнивание по центру */ }

Текст до изображения

Текст после изображения

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

Рис. 1. Изображение, выровненное по центру веб-страницы

Также к фотографии можно добавить подрисуночную подпись. Текст должен располагаться сразу же после изображения и аналогично ему выравниваться по центру. Здесь всё просто, опять воспользуемся нашим классом, но уже применим его к тегу . Чтобы текст подписи отличался по своему виду от обычных абзацев, сделаем его курсивным и выделим другим цветом (пример 2).

Пример 2. Подрисуночная подпись

HTML5 CSS 2.1 IE Cr Op Sa Fx

Фотография с подписью .fig { display: block; /* Блочный элемент (для старых браузеров) */ text-align: center; /* Выравнивание по центру */ font-style: italic; /* Курсивное начертание */ margin-top: 0; /* Отступ сверху */ margin-bottom: 5px; /* Отступ снизу */ color: #666; /* Цвет подрисуночной подписи */ } document.createElement("figure"); document.createElement("figcaption"); Пещерный человек добывает огонь. Но что это за лунная поверхность на заднем плане? Нет, не так все просто.

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

Рис. 2. Подпись под рисунком

Для блока с фотографией используется тег , а для подписи к нему тег . Старые версии IE не понимают эти теги, поэтому специально для них добавляется небольшой скрипт.