Css центрирование по горизонтали. CSS центрирование DIV блоков: горизонтальное и вертикальное
Выравнивание элементов по горизонтали и вертикали можно сделать различными способами. Выбор способа зависит от типа элемента (блочный или строчный), от типа его позиционирования, размеров и т.д.
1. Горизонтальное выравнивание по центру блока/страницы
1.1. Если для блока задана ширина:
div { width: 300px; margin: 0 auto; /*центрируем элемент по горизонтали в пределах родительского блока*/ }Если нужно выровнять строчный элемент таким способом, ему нужно задать display: block;
1.2. Если блок вложен в другой блок и для него не задана/задана ширина:
1.3. Если для блока задана ширина и его нужно зафиксировать по центру родительского блока:
1.4. Если для блоков не задана ширина, можно центрировать с помощью родительского блока-обертки:
2. Вертикальное выравнивание
2.1. Если текст занимает одну строчку, например, для кнопок и пунктов меню:
.button { height: 50px; line-height: 50px; }2.2. Для выравнивания блока по вертикали внутри родительского блока:
2.3. Вертикальное выравнивание по типу таблицы:
2.4. Если для блока задана ширина и высота, и его нужно выровнять по центру родительского блока:
2.5. Абсолютное позиционирование по центру страницы/блока с помощью CSS3-трансформации:
если для элемента заданы размеры
div { width: 300px; /*задаем ширину блока*/ height:100px; /*задаем высоту блока*/ transform: translate(-50%, -50%); position: absolute; top: 50%; left: 50%; }
если для элемента не заданы размеры и он не пустой
Some text here
В данной статье я расскажу, как поместить блок div по центру . Способов существует множество, но далеко не все позволяют сделать именно то, что требуется. Я приведу в пример самые лучшие и простые способы.
Вообще, есть дюжина способов как правильно выровнять div блок по центру, каждый вебмастер использует свой любимый\наиболее удобный способ. Но тем не менее, есть несколько основных, наиболее популярных и универсальных способа. И конечно-же, валидные по всем современным стандартам.
И да, стоит сразу сказать, что данные способы могут не работать в ie6, или чём-то подобном. Я даже не обращаю внимание на данный браузер, не смотря на то, сколько людей им пользуется. Пора бы уже отучивать пользоваться старьём.
Итак, что мы имеем?
Способ 1. Самый крутой
margin:0 auto;Очень эффективный метод, который к тому-же позволяет выровнять отступы сверху и снизу. В чём фишка метода? Всё просто до безумия. Мы имеем блок с определённой шириной (в пикселях, либо процентах), которому с помощью свойства «auto» задаём одинаковый отступ справа и слева, в итоге получаем div-блок по центру. Первое значение (0 в примере) — это отступ сверху и снизу.
К примеру, для выравнивания сверху пишем:
Margin:10px auto;
Для выравнивания сверху и снизу:
Margin:10px auto 5px;
На мой взгляд — это самый лучший способ выровнять блоки по центру . К тому-же он полностью валидный.
Способ 2. Процентный
Если блок имеет ширину в процентах, то мы можем выровнять div по центру применяя равные отступы, чтобы добить полную ширину до 100%. Кто не понял, покажу на примере, так проще:
Имеем блок шириной 50%, чтобы выровнять его по центру, нам нужно боковые отступы сделать по 25% справа и слева соответственно. Смотрим код:
Не напрягаясь, получаем блок по центру, выровненный банальной математикой (50 + 25 + 25) 🙂
Способ 3. Смешанный
Данный способ посоветовал в комментариях sman .
Как я упоминал в начале статьи, способов выровнять блок по центру огромное множество. Каждый выбирCgает тот, который ему больше по душе. Жду комментариев и новых способов 🙂
Способ 4. Использование дополнительного блока
Способ Виктор в комментариях:
#dop-block { position: relative; float: right; right: 50%; } #block { position: relative; float: left; left: 50%; }Ни один метод не решает проблему с float внутри блока, если ширина блока заведомо не известна (например, меню).
В таких случаях использую дополнительный блок, который обворачивает выравниваемый блок. Стиль примерно так:
При создании div блоков, наверняка вы сталкивались с ситуациями, где необходимо центрировать ваш div горизонтально и вертикально, с помощью чистого CSS. Например, при создании всплывающих окон с . Существует несколько способов реализовать центрирование, и в этой статье я расскажу о моих любимых и простых способах, с помощью CSS или jQuery.
Для начала, основы:
Горизонтальное центрирование на CSS
Это делается просто, мы используем margin для нашего div блока.
ClassName{ margin:0 auto; width:200px; height:200px; }
Для центрирования div блока только горизонтально, вам необходимо определить ширину блока (width), использовать свойство auto для отступов (margin) слева и справа . Этот метод будет работать для всех блочных элементов (div, p, h1, и так далее…). Для применения горизонтального центрирования для строковых элементов (ссылки, картинки…), вам необходимо применить параметр display: block;
Горизонтальное и вертикальное центрирование на CSS
Центрирование div блока по горизонтали и вертикали одновременно, немного замысловатее. Вам необходимо знать размеры div блока преждевременно.
ClassName{ width:300px; height:200px; position:absolute; left:50%; top:50%; margin:-100px 0 0 -150px; }
С помощью абсолютного позиционирования блока, мы можем отсоединить его от окружающих элементов и определить его позицию в отношении к размеру окна браузера. Перемещаем div блок на 50% слева и сверху окна. Теперь верхний левый угол блока находится в центре окна браузера. Остается установить div блок в центре страницы с помощью перемещения его на половину его ширины влево и половину его высоты вверх. Ура! Получилось превосходное центрирование блока на чистом css коде.
Горизонтальное и вертикальное центрирование на jQuery
Как упоминалось ранее – CSS метод центрирования работает только с фиксированными размерами. Если размеры не определены, на помощь придет jQuery метод:
$(window).resize(function(){ $(".className").css({ position:"absolute", left: ($(window).width() - $(".className").outerWidth())/2, top: ($(window).height() - $(".className").outerHeight())/2 }); }); // Для запуска функции при загрузке окна: $(window).resize();
Функционирование данного метода заключается в запуске функции resize(), с помощью строки $(window).resize() . Эта функция работает всегда, когда изменяется размер окна браузера. Мы используем outerWidth() и outerHeight() , потому что в противовес width() и height() , они включают отступы и толщину рамок в размер, который возвращается ими. Последняя строка, запускает процесс центрирования div блока при загрузке страницы.
Преимущество использования этого метода в том, что вы можете не знать, какой размер div блока. Главный недостаток – это работоспособность только при включенном JavaScript. Поэтому этот метод приемлем для многофункциональных интерфейсов, таких как Вконтакте, Facebook и т.д.
Как всегда, вы можете предложить свой любимый метод центрирования блоков, написав в комментарии.Windows : Internet Explorer 8.0+, Firefox 1.0+, Google Chrome, Opera 5.0+, Safari 3.1+, SeaMonkey 1.0+ [ 1 ] .
Linux : Firefox 1.0+, Google Chrome / Chromium, Opera 5.0+, SeaMonkey 1.0+ [ 2 ] , NetSurf 2.6+.
Горизонтальное выравнивание абсолютно позиционированного элемента по центру с помощью CSS. Пример:
HTML / XHTML. Код:
.example {position: relative; left: 0px; top: 0px; height: 90px; width: 100%; float: left; padding: 10px; border: 1px #ccc solid; background: #fafafa; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box;}
.example img {position: absolute; left: 0px; right: 0px; margin: 0px auto; width: 68px;}
В примере по центру выравнивается абсолютно позиционированный элемент img , но вообще данный способ горизонтального выравнивания по центру работает и с другими как строчными, так и блочными абсолютно позиционированными элементами.
Ширина абсолютно позиционированного элемента так же может быть в процентах или в других единицах измерения.
CSS свойства контейнера (в примере.example ), внутри которого находится выравниваемый по центру элемент, могут быть самые разные, выравнивание по центру создается с помощью стилей, непосредственно относящихся к элементу: .example img {position: absolute; left: 0px; right: 0px; margin: 0px auto;}.
Aliosque subditos et thema
A: Установка веб браузера Arachne на диске, создаваемом в оперативной памяти - в этом случае веб браузер Arachne работает быстрее всего. Размер оперативной памяти должен позволять создать RAM диск объемом в 6 Мб и более. Что бы установить и настроить веб браузер Arachne для подключения к сети Интернет через модем и телефонную линию (Dial-up), необходимо несколько программ: 1. Веб браузер Arachne [ Скачать ] 2. Пакет с кириллицей кодировки KOI8-R koi8-r.apm [ Скачать ] 3. Пакет с кириллицей кодировки CP-1251 / Windows-1251 cp1251.apm [ Скачать ] 4. Драйвер мыши, например mouse.com [ Скачать ] 5. Архиваторы. Например, PKZIP [ Скачать ] и PKUNZIP [ Скачать ] 6. В случае, если будет использоваться не MS-DOS 6.0+, QEMM97 [ Скачать ] 7. В случае, если будет использоваться не MS-DOS 6.0+, TDSK [ Скачать ] Установка и настройка веб браузера Arachne по шагам: 1. В оперативной памяти создать диск. Какая именно буква будет назначена ему операционной системой получится из расчета, что A: и B: пойдут для floppy дисководов (даже если он один, то все равно зарезервированы будут две буквы), C: для первого активного основного раздела на первом жестком диске; если есть еще диски, то будут использоваться последовательно столько букв, что бы назвать их всех. Если при этом нет устройств, установленных через DRIVER.SYS или аналогичные драйверы, то следующая буква будет относиться к RAM-диску. Что бы убедиться наверняка, можно, после добавления соответствующей строки в CONFIG.SYS (См. ниже) для создания RAM-диска, например, перезагрузить компьютер и опытным путем проверить под какой буквой находится RAM-диск. В рассматриваемом случае, это E: В зависимости от объема оперативной памяти нужно решить, сколько мегабайт можно выделить для RAM-диска. В принципе, чем больше, тем лучше. Так как, например, кэш браузера при продолжительном и интенсивном использовании в рамках сессии будет разрастаться в объеме. В данном примере объем RAM-диска назначается в 12 000 Кб. Для драйвера MS-DOS RAMDRIVE.SYS верхний предел, это 32 767 Кб, а для TDSK - 64 Мб. Что бы создать такой диск, нужно где-нибудь в средней части файла CONFIG.SYS прописать следующее: DEVICE=C:\DOS\RAMDRIVE.SYS 12000 512 512 /E 2. Создать папку, например C:\DRIVERS\, куда поместить драйвер мыши, например mouse.com. 3. В файл AUTOEXEC.BAT добавить строку, которая будет запускать драйвер мыши. В ней указать полный пусть к драйверу; может быть любой: LH C:\DRIVERS\MOUSE.COM 4. Запустить MemMaker или OPTIMIZE из QEMM97, что бы оптимизировать обращение с базовой памятью. Если MemMaker, то на все предложения можно просто ENTER - MemMaker всё сделает сам. Компьютер перезагрузится несколько раз, каждый раз будет запускаться MemMaker - опять ничего кроме ENTER можно не делать. Если используется QEMM97 (конкретно приложение OPTIMIZE), тоже будет несколько перезагрузок и во всех случаях тоже можно только ENTER. 5. Начать установку веб браузера Arachne на RAM-диск, в рассматриваемом примере, это диск E: A195GPL.EXE Что бы продолжить установку, нажать Y Нажать N, что бы ввести нужный путь к папке, куда будет установлен веб браузер Arachne. Ввести нужный путь к папке, куда будет установлен веб браузер Arachne. В рассматриваемом примере, это E:\ARACHNE\.
Выравнивание содержимого страницы по центру в видимой области окна браузера с помощью CSS. Контейнер, в котором будет находиться всё содержимое веб-страницы выравнивается по центру - по ширине и по высоте: [ Открыть страницу-пример ]. HTML / XHTML. Код:
Вообще центровка HTML элементов на странице - это дело не сложное. В некоторых случаях... веб разработчикам приходится ломать голову, чтобы найти лучшее решение.
Центровка элементов по горизонтали не так уж и сложна, по вертикали уже вызывает вопросы, ну а комбинирование вообще может поставить в тупик. В эру адаптивного дизайна, нам редко точно ясны размеры тех или иных элементов. Я насчитал 6 различных способов центровки элементов с помощью CSS. Начнём с простых примеров, закончим более сложными. Работать будет с одним и тем же HTML кодом:
Горизонтальная центровка с помощью text-align
Порой, самое простое решения является самым лучшим:
Div.center { text-align: center; background: hsl(0, 100%, 97%); } div.center img { width: 33%; height: auto; }
Тут нет вертикальной центровки: для этого вам нужно будет к div-у добавить свойство margin-top и margin-bottom.
Центровка с помощью margin: auto
Ещё одно решения для горизонтальной центровки:
Div.center { background: hsl(60, 100%, 97%); } div.center img { display: block; width: 33%; height: auto; margin: 0 auto; }
Заметьте что для этого способа нужно выставить свойство display: block.
Центровка с помощью table-cell
Используя display: table-cell, мы можем обеспечить центровку элемента как по вертикали, так и по горизонтали. Но тут нам понадобится вложить изображение ещё в один элемент div.
Center-aligned { display: table; background: hsl(120, 100%, 97%);width: 100%; } .center-core { display: table-cell; text-align: center; vertical-align: middle; } .center-core img { width: 33%; height: auto; }
Чтобы всё работало корректно, div-у нужно выставить width: 100%. Для центровки элемента по вертикали, воспользуемся стандартными приёмами, выставив высоту. Работает везде, включая IE8+.
Абсолютная центровка
Очень интересное решение. Заключается в том, что необходимо задать высоту внешнему контейнеру:
Absolute-aligned { position: relative; min-height: 500px; background: hsl(200, 100%, 97%); } .absolute-aligned img { width: 50%; min-width: 200px; height: auto; overflow: auto; margin: auto; position: absolute; top: 0; left: 0; bottom: 0; right: 0; }
Центрируем с помощью translate
Новое решение, где используются CSS трансформации. Обеспечивает как горизонтальную центровку, так и вертикальную:
Center { background: hsl(180, 100%, 97%); position: relative; min-height: 500px; } .center img { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 30%; height: auto; }
Есть несколько минусов:
- Свойство CSS transform требует использование браузерных префиксов
- Не работает в старых версиях IE (8 и ниже)
- Внешнему контейнеру нужно задавать высоту.
- Если внутри контейнера есть текст, то он может быть немного размыт.
Центровка с помощью вида отображения flex
Наверное самый простой вариант.
Center { background: hsl(240, 100%, 97%); display: flex; justify-content: center; align-items: center; } .center img { width: 30%; height: auto; }
Работает не во всех версиях IE (хотя можно подстраховать себя, используя вдобавок display: table-cell). Полный CSS:
Center { background: hsl(240, 100%, 97%); display: -webkit-box; /* Safari, iOS 6 и ранних версиях; Android, старых WebKit */ display: -moz-box; /* Firefox (может и глючить) */ display: -ms-flexbox; /* IE 10 */ display: -webkit-flex; /* Chrome 21+ */ display: flex; /* Opera 12.1+, Firefox 22+ */ -webkit-box-align: center; -moz-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; -webkit-box-pack: center; -moz-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; }
Центровка с помощью calc
В некоторых случаях, данный способ более универсален чем использование flexbox:
Center { background: hsl(300, 100%, 97%); min-height: 600px;position: relative; } .center img { width: 40%; height: auto; position: absolute; top:calc(50% - 20%); left: calc(50% - 20%); }
Всё очень просто, мы можем высчитать нужные нам размеры в зависимости от всего макета страницы. Вычисления очень просты, 50% это центральная точка контейнера, но наша задача разместить по этим координатам левый верхний угол изображения. Далее отнять по половине высоты и ширины изображения. Формула следующая:
Top: calc(50% - (40% / 2)); left: calc(50% - (40% / 2));
На практике вы можете обнаружить, что данный метод работает отлично, если нам известны размеры элементов:
Center img { width: 500px; height: 500px; position: absolute; top:calc(50% - (300px / 2)); left: calc(50% - (300px - 2)); }
Данный метод поддерживается Firefox-ом, начиная с 4 версии, вам нужно будет прописать браузерные префиксы. В IE 8 не работает. Полный код:
Center img { width: 40%; height: auto; position: absolute; top: -webkit-calc(50% - 20%); left: -webkit-calc(50% - 20%); top: -moz-calc(50% - 20%); left: -moz-calc(50% - 20%); top: calc(50% - 20%); left: calc(50% - 20%); }
Надеюсь, данных методов хватит, чтобы вы нашли для себя лучшее решение.
-
17 апреля 2015Соляная лампа «Каменный цветок -
17 апреля 2015Продуктивные способы потратить время в интернете -
17 апреля 2015Как установить приложение плей маркет на ноутбук
