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

Резюмируем

Основная сложность при выравнивании элементов веб-страницы по центру — обилие подходов, у каждого из которых свои тонкости и ограничения:

Flexbox удобен для любого вида выравнивания. При таком подходе необходимо задавать стили только родительскому элементу.
Позиционирование можно использовать для выравнивания по вертикали и размещения элемента по центру блока (выравнивания по вертикали и горизонтали одновременно).
Автоотступы и inline-блоки удобно использовать для горизонтального выравнивания, ячейки таблицы — для вертикального, Grid — для размещения элемента по центру родительского блока.

Больше интересного про код в нашем телеграм-канале. Подписывайтесь!

Центрирование div по горизонтали и вертикали

При создании макета веб-страницы, вы, вероятно, сталкивались с ситуацией, когда вам нужно отцентрировать div по горизонтали и вертикали, используя CSS. Есть несколько способов с применением CSS и JQuery.

Но вначале основы:

Выравнивание по горизонтали средствами CSS

.class-name margin:0 auto; width:200px; height:200px; >

Для центрирования div только по горизонтали, необходимо указать ширину и автоматическое значение для левого и правого margins (это сокращенная форма написания CSS-свойств). Этот метод работает на блочных элементов ( div, p, h1 и т. п.). Чтобы применить его для линейных элементов (например, гиперссылок и изображений), необходимо написать еще одно правило — display:block .

Выравнивание по горизонтали и вертикали средствами CSS

Одновременное центрирование div по по горизонтали и вертикали чуть более хитрое. Вам нужно заранее знать размеры div .

.class-name width:300px; height:200px; position:absolute; left:50%; top:50%; margin:-100px 0 0 -150px; >

С помощью абсолютного позиционирования элементов, мы можем выдернуть его из потока и задать его позицию по отношению к окну браузера. Задав смещение div на 50% от левой и верхней части окна, мы центрируем левый верхний угол относительно страницы. Единственное, что нам осталось сделать, это сместить div влево и вверх на половину его ширины и высоты, задав отрицательные значения margin , чтобы он идеально располагался по центру.

Выравнивание по горизонтали и вертикали с помощью jQuery

Как уже говорилось, вышеуказанный метод CSS работает только с div -ом фиксированного размера. На помощь приходит JQuery:

// объявление функции: $(window).resize(function() $(‘.class-name’).css( position:’absolute’, left: ($(window).width() — $(‘.class-name’).outerWidth())/2, top: ($(window).height() — $(‘.class-name’).outerHeight())/2 >); >); // вызов функции: $(window).resize();

Функция вычисляет ширину окна в $(window).resize() всякий раз при каждом изменении размера окна пользователем. Мы используем outerWidth() и outerHeight() , потому что в отличие от обычной width() и height() , они добавляют padding и ширину border , возвращая размер. Наконец, мы адаптируем при изменении размеров окна и центрируем div при перезагрузке страницы.

Преимуществом использования этого метода является то, что вам заранее не нужно знать размер div -а. Основным недостатком является то, что этот метод будет работать только с включенным JavaScript.

CSS3 Учебник

CSS3 Закругленные углыCSS3 Изображен. границаCSS3 Слои фона изображ.CSS3 ЦветаCSS Ключевые сл. цветаCSS3 Градиент
Линейные градиенты
Радиальные градиенты
Конические градиенты

CSS3 Тени
Теневые эффекты
Тени бокса

CSS3 Эффект текстаCSS3 Веб шрифтыCSS3 2D ТрансформацияCSS3 3D ТрансформацияCSS3 ПереходCSS3 АнимацияCSS3 Всплыв. подсказкиCSS3 Стиль изображенияCSS3 Отраж. изображенияCSS3 Объект-подгонкаCSS3 Объект-позицияCSS3 МаскировкаCSS3 КнопкиCSS3 ПагинацияCSS3 Несколько столбцовCSS3 ИнтерфейсCSS3 Переменные
Переменная var()
Переопределение
Переменные с JS
Медиа-запросы

CSS3 Размеры боксовCSS3 Медиа запросыCSS3 Медиа примерыCSS3 Флексбокс
CSS Гибкий бокс
CSS Flexbox контейнер
CSS Flexbox элементы
CSS Flexbox отзывчивый

Использование отступов

Если добавить отступ к слою слева с помощью свойства margin-left,
то визуально слой сместится на указанное значение вправо. Зная ширину слоя,
его можно сместить так, чтобы слой располагался по центру веб-страницы. Для
чего от 100%, составляющих общую доступную ширину, надо отнять ширину слоя
в процентах и полученное значение разделить пополам. Результат и будет значением
свойства margin-left (пример 1).

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

Как вариант, можно не указывать ширину, а регулировать ее с помощью отступа
слева и справа (пример 2).

Пример 2. Использование отступов

В данном примере показано размещение слоя шириной 40% по центру.
Хотя сама ширина никак напрямую не задается, она определяется значением свойств
margin-left и margin-right. Они устанавливают отступ слева и справа,
чтобы слой располагался по середине, их значения должны быть равны.

Следующий способ более универсален и уже не зависит от того, какие единицы
измерения используются для установки ширины. Для этого требуется задать отступ слева и справа для слоя равным auto через стилевые свойства margin-left и margin-right или универсальное свойство margin (пример 3).

Пример 3. Применение значения auto

В данном примере ширина слоя устанавливается 400 пикселов и выравнивается
по центру с помощью значения 0 auto свойства margin. Первый аргумент устанавливает нулевой отступ одновременно сверху и снизу от слоя, а второй аргумент выравнивает слой по центру горизонтали окна браузера.

Выравнивание картинки по центру CCS

В случае если у вас есть несколько изображений, которые нужно выровнять по центру, то лучше подойдёт выравнивание картинок по центру путём внесения правок в файл CSS-стилей страницы или сайта. Для этого нужно присвоить изображению класс и дописать показанные ниже css-свойства.

HTML:

PHP

1	<img class=»center-pic»srcimagesmokup.jpg» alt=»img» width=»394″ height=»286″>

CSS:

PHP

.center-pic{
display:block;
margin:auto;
}

1
2
3
4

.center-pic{

displayblock;

marginauto;

}

Этот способ выравнивания картинки css работает практически всегда. Задавать изображению класс не обязательно. Вы можете обратиться к нему через класс блока в котором оно находится. Например:

PHP

.conteiner img{
display:block;
margin:auto;
}

1
2
3
4

.conteiner img{

displayblock;

marginauto;

}

Так же можно воспользоваться альтернативным вариантом выравнивания картинки по центру, обернув изображение в абзац тегом <p> и, по аналогии с вариантом для HTML, задать абзадцу свойство text-align:center.

HTML:

PHP

1	<pclass=»center-pic»><img src=»//impuls-web.ru/wp-content/uploads/2017/06/mokup-horex.jpg»alt=»img»width=»394″height=»286″><p>

CSS:

PHP

.center-pic{
text-align:center;
}

1
2
3

.center-pic{

text-aligncenter;

}

С помощью показанных в этой статье способов выравнивания картинок в html и css вы сможете выровнять нужное вам изображение практически в любой ситуации. В своей практике я стараюсь чаще использовать вариант с использованием text-align:center; или margin:auto, в зависимости от ситуации.

На этом я, пожалуй, закончу статью. Надеюсь, данная статья поможет вам разобраться с выравниванием картинок в html и css и вы сможете подобрать для себя наиболее удобный вариант.

Желаю вам успехов в создании своего сайта! До встречи в следующей статье!

С уважением Юлия Гусарь

Обтекание картинки текстом в Html — атрибут Align тега Img

Теперь давайте поговорим про выравнивание вставленных изображений в Html коде. У всех четырех строчных элементов с замещаемым контентом (Img, Iframe, Object и Embed) есть возможность выравнивания с помощью атрибута Align. Но он вообще-то применяется только для блочных элементов, а упомянутые теги — строчные.

Поэтому некоторые значения Align для Img (например, задание обтекания картинки текстом) будут означать совсем иное, нежели при использовании этого же атрибута в блочных элементах (параграфах P, заголовках H1-H6 и т.п.).

Вообще, выравнивание картинок с помощью Align при использовании в Img можно разделить на две группы.

Итак, что же происходит, когда мы вставляем графический файл в текст документа? Фактически он встает как одна большая буква:

По умолчанию используется выравнивание по нижнему краю, т.е. добавление в элемент Img атрибута align=»bottom» ничего не изменит. Но зато можно попробовать задать выравнивание картинки по верхнему краю, добавив в элемент align=»top»:

<img src="https://ktonanovenkogo.ru/image/rss_no_drop1.png" align="top">

В этом случае произошло выравнивание текста в строке, где расположена фотография, по верхнему ее краю.

Возможно еще одно значение этого атрибута align=»middle»:

<img src="https://ktonanovenkogo.ru/image/rss_no_drop1.png" align="middle">

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

Но кроме выравнивания по вертикали в Html предусмотрено и обтекание картинок текстом, для чего используются значения — Left и Right. Эта группа значений атрибута Align сильно отличается от предыдущей.

При использовании значений Left и Right внутри элемента Img мы добиваемся, так называемого, обтекания картинки текстом, которое задается в Html коде. В этом случае рисунок становится плавающим элементом (аналог Float в CSS) и текст начинает ее обтекать.

Например, при align=»left» мы получим такой результат:

<img src="https://ktonanovenkogo.ru/image/rss_no_drop1.png" align="left">

Значение Left в Img означает, что фото плавает в левую сторону, а текст ее обтекает справа. В случае align=»right» картинка будет плавать в правую сторону, а текст ее будет обтекать слева:

<img src="https://ktonanovenkogo.ru/image/rss_no_drop1.png" align="right">

При задании обтекания изображения текстом есть один нюанс — текст слишком близко располагается от него, что создает неприятный глазу эффект прилипания. Данную проблему совсем легко решить с помощью CSS свойств padding или margin, но и в чистом Html существует свое решение.

Для этого можно использовать атрибуты элемента Img — Hspace и Vspace. С помощью них отжимается обтекающий текст от изображения. Hspace задает отступы слева и справа от изображения до обтекающего его текста, а Vspace — сверху и снизу. Отступы задаются в пикселах, например:

<img src="https://ktonanovenkogo.ru/image/rss_no_drop1.png" align="left" hspace="30" vspace="30">

Как вставить картинку с ссылкой, назначение Alt и Title в Img?

Если Img по своей сути является строчным элементом, то его можно просто считать большой буквой, а значит нам ничто не мешает сделать изображение ссылкой, заключив этот тег внутрь гиперссылки. Вообще, про это я уже достаточно подробно писал в недавней статье про создание гиперссылки в Html коде, но немного повториться будет не грех.

<a href="https://ktonanovenkogo.ru"><img src="https://ktonanovenkogo.ru/image/webcamxp.png"></a>

В браузере IE вокруг картинки, которую вы сделали ссылкой, появится рамочка шириной в три пиксела. Чтобы ее убрать, вам нужно будет добавить в тэг Img атрибут Border со значением ноль:

<a href="https://ktonanovenkogo.ru"><img border=0 src="https://ktonanovenkogo.ru/image/webcamxp.png"></a>

Для всех тех случаев, когда графический файл по каким-либо причинам не может подгрузиться вместе с Html документом (путь до него прописан не верно или же еще что-то), предусмотрен специальный атрибут Alt.

Alt выполняет роль альтернативного представления изображения. Что происходит в том случае, когда графика не грузится? Браузер все равно, обнаружив в коде элемент Img, формирует под него область, которая в зависимости от используемого пользователем браузера может либо оставаться заданного размера, либо схлопываться.

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

<img src="путь до файла изображения" width="545" height="50" >

Ну, и кроме этого, для картинок в Html коде, а так же и для других элементов языка гипертекстовой разметки (например, все для тех же гиперссылок) имеется возможность при наведении пользователем на них курсором мыши показывать ему какой-либо сопровождающий текст.

Делается это с помощью специального атрибута Title, который в нашем случае вставляется в Img. Он по сути является всплывающей подсказкой и его можно использовать практически для всех видимых на странице элементах Html кода, когда вам нужно что-то дополнительно пояснить.

Раньше, кстати, к всплывающей подсказке приводило и добавление текста Alt, но сейчас от такого поведения отказываются и этот атрибут теперь в основном выполняет только роль альтернативного текста, а Title используется исключительно для всплывающих подсказок.

<img src="https://ktonanovenkogo.ru/image/rss_no_drop1.pngя" height="71" width="90" alt="" title="">

На самом деле содержимое Alt и Title тега Img не только служит для удобства посетителей вашего сайта, но и может оказывать очень существенную роль на успешность продвижения вашего проекта.

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

Ключевые слова в Alt и Title (особенно в Alt) могут заметно улучшить ранжирование вашего сайта, а так в сервисах поиска по изображениям (картинкам) Яндекса или Google. Однако с этим нужно быть осторожным, ибо довольно легко можно попасть под фильтр за спам от Яндекса или Гугла.

Атрибут align тега

Еще один способ размещения по центру вообще не требует использования никаких
стилей и связан с атрибутом align тега <div>.
Указывая значение center, заставляем содержимое слоя выравниваться по его
центру. Поэтому необходимо создать два слоя, один из которых будет служить
контейнером для другого, как показано в примере 4.

Пример 4. Атрибут align

Опять же, как и в случае использования свойства text-align,
размещаться по центру будет и текст внутри слоя. Поэтому следует насильно
задать ему необходимое выравнивание через стили. Ширину слоя-контейнера задавать
не требуется, она будет вычисляться автоматически и занимать все доступное
пространство веб-страницы.

Выравнить — используя позицию

Один из способов для выравнивания элементов является использование абсолютной позиции :

В мои молодые годы, мой отец дал мне совет, который раз, до сих пор, прокручивается в моей голове.

Пример

.right {
   position: absolute;
   right: 0px;
   width: 300px;
   border: 3px solid #73AD21;
   padding: 10px;}

Примечание: Абсолютно позиционированные элементы удаляются из нормального потока, и они могут перекрываться другими элементами.

Совет: При выравнивании элементов с помощью позиции , всегда определяйте поле
и отступ для элемента ,
что позволяет избегать визуального различия в других браузерах.

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

Пример

body {
   margin: 0;
   padding: 0;}
.container{
   position: relative;
   width: 100%;}
.right{
   position: absolute;
   right: 0px;
   width: 300px;
   background-color: #b0e0e6;}

Рисунок на поле

При такой схеме изображение располагается справа или слева от текста, причем его обтекание происходит только с одной стороны. Фактически это напоминает две колонки, в одной из них находится рисунок, а в другой текст (рис. 3).

Рис. 3. Изображение размещается на поле слева от текста

Существует несколько методов достижения подобного результата. Рассмотрим два из них — использование таблицы и применение стилевого свойства margin.

Применение таблиц

Таблицы удобны тем, что позволяют легко создать структуру колонок с помощью ячеек. Потребуется таблица с тремя ячейками, в одной будет располагаться изображение, во второй текст, а третья нужна, чтобы создать отступ между ними. Можно также обойтись и двумя ячейками, а нужное расстояние задать через стили или с помощью атрибута width тега <td>. В примере 4 показано создание указанной таблицы.

Пример 4. Создание рисунка на поле с помощью таблиц

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

Рис. 4. Изображение слева от текста

В данном примере ширина рисунка составляет 90 пикселов, а ширина колонки, где он располагается — 110 пикселов. Разница между ними и обеспечивает нужное расстояние от текста до картинки. Чтобы атрибуты таблицы cellspacing и cellpadding не вмешивались в процесс, их значения лучше обнулить

Обратите внимание, что в ячейках задается выравнивание по высоте

Использование стилей

В данном случае потребуется два слоя, параметры которых будем изменять через CSS. Изображение поместим в слой с именем pic, а текст, сильно не мудрствуя, в слой text. Теперь для слоя piс следует установить свойство float со значением left, а для text — margin-left. Значение этого параметра равно ширине рисунка плюс необходимый отступ до текста (пример 5).

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

Свойство float в данном примере нужно, чтобы верхний край текста совпадал с верхним краем рисунка. Без этого свойства слой text опускается вниз на высоту изображения.

Если рисунок следует расположить справа от текста, то значение float меняем на right, а свойство margin-left на margin-right.

CSS Учебник

CSS ГлавнаяCSS ВведениеCSS СинтаксисCSS СелекторыCSS ПодключениеCSS КомментарииCSS Цвет
Цвет
RGB
HEX
HSL

CSS Фон
Фон цвет
Фон изображение
Фон повторение
Фон вложеный
Фон стенография

CSS Границы
Границы
Ширина границ
Цвет границ
Стороны границ
Границы стенография
Закругленные границы

CSS Поля
Отступ cнаружи
Разрушить поля

CSS Отступы внутриCSS Высота и ширинаCSS Бокс модельCSS Контур
Контур
Ширина контура
Цвет контура
Контур стенография
Смещение контура

CSS Текст
Форматирование текста
Выравнивание текста
Оформление текста
Преобразование текста
Интервал текста
Тень текста

CSS Шрифты
Семейство шрифтов
Безопасные шрифты
Резервные шрифты
Стиль шрифтов
Размер шрифтов
Google шрифты
Сочетание шрифтов
Стенография шрифтов

CSS ИконкиCSS СсылкиCSS СпискиCSS Таблицы
Границы таблицы
Размер таблицы
Выравнивание таблицы
Стиль таблицы
Отзывчивая таблица

CSS ДисплейCSS Макс. ширинаCSS ПозиционированиеCSS ПерекрытиеCSS ПереполнениеCSS Поплавок
Поплавок
Очистить
Примеры float

CSS Линейный блокCSS ВыравниваниеCSS КомбинаторыCSS Псевдо-классыCSS Псевдо-элементыCSS ПрозрачностьCSS Навигация сайта
Панель навигации
Вертикальная
Горизонтальная

CSS Выпадающие спискиCSS Галерея изображенийCSS Спрайты изображенийCSS Атрибуты селекторовCSS ФормыCSS СчетчикиCSS Макет сайтаCSS Еденицы измеренийCSS ОсобенностиCSS !importantCSS Математ. функции

Использование отступов

Если добавить отступ к слою слева с помощью параметра margin-left,
то визуально слой сместится на указанное значение вправо. Зная ширину слоя,
его можно сместить так, чтобы слой располагался по центру веб-страницы. Для
чего от 100%, составляющих общую доступную ширину, надо отнять ширину слоя
в процентах и полученное значение разделить пополам. Результат и будет значением
параметра margin-left (пример 1).

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

<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01 Transitional//EN»>
<html>
<head>
<style type=»text/css»>
#centerLayer {
margin-left: 30%;
width: 40%;
background: #fc0;
padding: 10px;
}
</style>
</head>
<body>
<div id=»centerLayer»>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy
nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.
</div>
</body>
</html>

Как вариант, можно не указывать ширину, а регулировать ее с помощью отступа
слева и справа (пример 2).

Пример 2. Использование отступов

<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01 Transitional//EN»>
<html>
<head>
<style type=»text/css»>
#centerLayer {
margin-left: 30%;
margin-right: 30%;
background: #fc0;
padding: 10px;
}
</style>
</head>
<body>
<div id=»centerLayer»>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy
nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.
</div>
</body>
</html>

В данном примере показано размещение слоя шириной 40% по центру.
Хотя сама ширина никак напрямую не задается, она определяется значением атрибутов
margin-left и margin-right. Эти параметры устанавливают отступ слева и справа,
чтобы слой располагался по середине, их значения должны быть равны.

Использование отступов

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

Как вариант, можно не указывать ширину, а регулировать ее с помощью отступа
слева и справа (пример 2).

Пример 2. Использование отступов

Пример 3. Применение значения auto

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

Для выравнивания изображения по центру в css используются свойства:

1. display(вид визуального отображения).
По умолчанию границы элемента картинки равны размерам(ширина, высота) и это свойство не позволяет ее отображать по центру. Поэтому
для начала необходимо превратить картинку в блочный элемент, который будет занимать всю ширину родительского блока, при сохранении
размеров изображения. Это позволит отобразить изображение по центру его же блока. Для задания картинке свойства блочного элемента,
занимающего всю ширину, используется свойство display: block.

2. margin(внешние отступы).
У свойства margin: y1 x1 y2 x2, значения y1 x1 y2 x2 отвечают за отступ сверху, справа,
снизу и слева соответственно. Если вместо
отступов x1 и x2 написать auto в css, то будет выравнивание картинки по центру относительно горизонтальной плоскости.

Пример кода как выровнять картинку по центру

Результат в браузереКод страницы
<!DOCTYPE html>
<html lang=»ru»>
<head>
<meta charset=»utf-8″ />
<title>Тестовая страница</title>
</head>
<body>
<img src=»my_img/1.jpg» style=»margin:0px auto 0px auto; display:block» >
</body>
</html>

Абсолютное позиционирование слоя

При абсолютном позиционировании координаты слоя вычисляются относительно левого верхнего угла окна родительского элемента или браузера, если родителя нет. Слой, заданный с абсолютным позиционированием, может располагаться под основным текстом или, наоборот, поверх него. Положение определяется с помощью стилевого свойства z-index и позволяет гибко управлять положением слоя по условной z-оси. Таким способом удобно выводить на веб-странице различные подсказки, всплывающие окна, рекламу или плавающие меню.

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

Следующий шаг — задаем абсолютное позиционирование слоя через position: absolute. Положение слоя следует определить как 50% по горизонтали и вертикали с помощью свойств left и top. Эти значения остаются неизменными, независимо от используемых единиц измерения.

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

Чтобы высота слоя не менялась из-за его контента, включен overflow: auto, он добавляет полосы прокрутки, если в них возникнет нужда, высота при этом остается неизменной (пример 5).

Пример 5. Ширина слоя в пикселах

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Выравнивание</title>
  <style type="text/css">
   #centerLayer {
    position: absolute;	/* Абсолютное позиционирование */
    width: 400px; /* Ширина слоя в пикселах */
    height: 300px; /* Высота слоя в пикселах */
    left: 50%; /* Положение слоя от левого края */
    top: 50%; /* Положение слоя от верхнего края */
    margin-left: -211px; /* Отступ слева, включает padding и border */
    margin-top: -150px;	/* Отступ сверху */
    background: #fc0; /* Цвет фона */
    border: solid 1px black; /* Параметры рамки вокруг */
    padding: 10px; /* Поля вокруг текста */
    overflow: auto; /* Добавление полосы прокрутки */ 
   }
  </style>
 </head>
 <body>
   <div id="centerLayer">
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy
    nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.
  </div>
 </body>
</html>

В случае использования процентной записи стиль меняется незначительно, надо так же поделить ширину и высоту пополам и добавить полученные значения в качестве аргументов к свойствам margin-left и margin-top (пример 6). При этом надо учитывать, что видимая ширина элемента складывается из значений width, padding и border.

Пример 6. Ширина слоя в процентах

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Выравнивание</title>
   <style type="text/css">
    #centerLayer {
     position: absolute; /* Абсолютное позиционирование */
     width: 40%; /* Ширина слоя в процентах */
     height: 30%; /* Высота слоя в процентах */
     left: 50%; /* Положение слоя от левого края */
     top: 50%; /* Положение слоя от верхнего края */
     margin-left: -20%; /* Отступ слева */
     margin-top: -15%; /* Отступ сверху */
     background: #fc0; /* Цвет фона */
    }
   </style>
  </head>
  <body>
    <div id="centerLayer">
      Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh
      euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.
    </div>
 </body>
</html>

Ширина и высота слоя напрямую связана с отступами слева и сверху, если требуется установить значение одного из параметров в процентах, соответственно, поменяется и запись другого параметра. Как показано в данном примере, ширина слоя установлена в 40%, следовательно, и для свойства margin-left также надо применить проценты, в данном случае, 20%.

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

Резюмируем

Центрирование div по горизонтали и вертикали

Выравнивание по горизонтали средствами CSS

Выравнивание по горизонтали и вертикали средствами CSS

Выравнивание по горизонтали и вертикали с помощью jQuery

CSS3 Учебник

Использование отступов

Выравнивание картинки по центру CCS

Обтекание картинки текстом в Html — атрибут Align тега Img

Как вставить картинку с ссылкой, назначение Alt и Title в Img?

Атрибут align тега

Выравнить — используя позицию

Пример

Пример

Рисунок на поле

Применение таблиц

Использование стилей

CSS Учебник

Использование отступов

Использование отступов

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

Пример кода как выровнять картинку по центру

Абсолютное позиционирование слоя

Похожие записи:

Похожие записи: