Вообще центровка 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; }
Есть несколько минусов:
Наверное самый простой вариант.
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%); }
Надеюсь, данных методов хватит, чтобы вы нашли для себя лучшее решение.
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
Выравнивание по центру с помощью CSS, если ее ширина меньше 100%. Горизонтальное выравнивание по центру. Пример: HTML / XHTML. Код: CSS. Код: hr {width: 50%; margin: 0 25% 0 25%;} /* Дополнительные CSS, просто для приведения примера к некоему внешнему виду: */ hr {height: 1px; float: left; border: 0px; color: #f00; background: #f00;} Примечание: большей частью работает как с float: left, так и с float: none. Однако с float: left самый верный вариант. [ 1 ] А так же в Netscape 4.04+, Mozilla 0.6+. [ 2 ] А так же в Netscape 4.04+, Mozilla 0.6+.
FAR Manager: DOS Navigator: File Commander Идея и требования к файловым менеджерам оформились еще в эру DOS. С распространением операционных систем с графическим интерфейсом появились и другие приложения облегчающие обращение с файлами. Однако для многих задач и для многих пользователей файловый менеджер остался самым удобным вариантом. Уже давно есть файловые менеджеры с графическим интерфейсом, однако консольные файловые менеджеры продолжают занимать не только свою нишу, но и часть пространства, по идее принадлежащего файловым менеджерам с GUI. Сегодня файловые менеджеры могут в общем и целом то же самое и в общем и целом тем же способом, но быстрота отклика на действия пользователя у файловых менеджеров с текстовым интерфейсом выше. Так же, хоть это сейчас мало актуально, консольным файловым менеджерам требуется меньше системных ресурсов, чем аналогичным по функциональности файловым менеджерам с графическим интерфейсом. FAR Manager - / home page / Консольный файловый менеджер для Windows. Среди встроенных функций: FTP, поддержка Windows network, работа с файловыми архивами, менеджер печати, текстовый редактор. Дополнительно возможно установить плагины: поддержка SFTP/SCP, просмотрщик графических файлов, hex-редактор, поддержка подсветки синтаксиса у текстового редактора и некоторые другие. FAR Manager 2.0: Консольный файловый менеджер FAR Manager 2.0: FTP, загрузка файлов FAR Manager 2.0: Одно из подменю FAR Manager 2.0: Системные настройки FAR Manager 2.0: Текстовый редактор FAR Manager 2.0: MPlayer, проигрывающий.mp3 DOS Navigator - / open source project / Консольный файловый менеджер для Windows. Вариант файлового менеджера для DOS. Существует так же версия для OS/2. Работа с файловыми архивами, текстовый редактор с поддержкой подсветки синтаксиса, редактор дисков, редактор электронных таблиц, калькулятор, календарь и другое.
При создании макета веб-страницы, вы, вероятно, сталкивались с ситуацией, когда вам нужно отцентрировать div по горизонтали и вертикали, используя CSS. Есть несколько способов с применением CSS и JQuery.
Но вначале основы:
Выравнивание по горизонтали средствами CSSClass-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 при перезагрузке страницы.
18.02.15 21.4KЕсли разрезать любой сайт, созданный на основе html , то перед вами предстанет некая послойная структура. Причем своим внешним видом она будет схожа со слоеным пирогом. Если вам так кажется, то вероятнее всего вы давно не ели. Поэтому сначала утолите свой голод, а затем мы поведаем вам о том, как расположить слой div по центру вашего сайта:
Преимущества верстки с помощью тегаСуществует два основных типа построения структуры сайта:
Табличная верстка была доминирующей еще на заре зарождения интернета. К ее преимуществам можно отнести точность заданного позиционирования. Но, тем не менее, она обладает явными недостатками. Главными из них является объемность кода и низкая скорость загрузки.
При использовании табличной верстки веб-страница не будет отображаться вплоть до полной загрузки. В то время как при использовании блоков div элементы отображаются сразу.
Кроме высокой скорости загрузки блочное построение сайта позволяет в несколько раз уменьшить объем кода html . В том числе и за счет использования классов CSS .
Тем не менее, табличную верстку следует использовать для структуризации отображения данных на странице. Классическим примером ее применения является отображение таблиц.
Блочное построение на основе тегов также называют послойным, а сами блоки слоями. Это связано с тем, что при использовании определенных значений свойств их можно размещать один поверх другого подобно слоям в Photoshop.
Средства позиционированияВ блочной верстке позиционирование слоев лучше осуществлять с помощью средств каскадных таблиц стилей. Основным свойством CSS, отвечающим за расположение , является float.
Синтаксис свойства:
float: left | right | none | inherit
,
Где:
Рассмотрим облегченный пример позиционирования блоков div с помощью этого свойства:
#left { width: 200px; height: 100px; float: left; background: rgb(255,51,102); } #right { width: 200px; height: 100px; float: right; background: rgb(0,255,153); } Левый блок Правый блок
В следующем примере мы будем использовать слой-контейнер, в котором разместим остальные элементы. Это решает проблему смещения блоков друг относительно друга при изменении размеров окна. Центрирование контейнера посредине осуществляется с помощью задания свойствам margin нулевого значения отступам от верхнего края и auto по бокам (margin: 0 auto ):
#container { width: 600px; margin: 0 auto; } #left { width: 200px; height: 100px; float: left; background: rgb(255,51,102); } #right { width: 200px; height: 100px; float: left; background: rgb(0,255,153); } #center { width: 200px; height: 100px; float: left; background: rgb(255,0,0); } Левый блок Центральный блок Правый блок
После изменения все блоки выстроятся строго в ряд посредине. И их положение не изменится при любых размерах окна браузера. Вот как выглядит такое центрирование div по центру по вертикали:
#container { width: 450px; height:150px; margin:0 auto; background-color:#66CCFF; } #left { width: 100px; height: 100px; background: rgb(255,51,102); display: inline-block; vertical-align: middle; margin-left: 35px; } #right { width: 100px; height: 100px; background: rgb(0,255,153); display: inline-block; vertical-align: middle; margin-left: 35px; } #center { width: 100px; height: 100px; background: rgb(255,0,0); display: inline-block; vertical-align: middle; margin-left: 35px; }
Как ни странно звучит, но такое возможно. Иногда div блок как ссылка может понадобиться при верстке различных видов меню. Рассмотрим практический пример реализации слоя-ссылки:
#layer1{ width: 500px; height: 100px; background: rgb(51,255,204); border:groove; } a { display: block; text-align: center; height: 100%; color: rgb(255,0,51); } Ссылка на наш сайт
Блочные элементы предоставляют больше возможностей для расширения функционала интерфейса, чем устаревшая табличная верстка. Часто бывает, что дизайн сайта является уникальным и узнаваемым. Но за такой эксклюзив приходиться платить нехваткой свободного места.
Особенно это касается главной страницы, стоимость размещения рекламы на которой является самой высокой. Поэтому и появляется проблема, куда бы «впихнуть » еще один рекламный баннер. И тут уж выравниванием div по центру страницы никак не отделаешься!
Более рациональным решением является сделать какой-нибудь блок скрывающимся. Вот простой пример такой реализации:
#layer1{ display:block; width: 500px; height: 100px; background: rgb(51,255,204); border:groove; } function show() { if(layer1=="none") { layer1="block"; } else { layer1="none"; } document.getElementById("layer1").style.display=layer1; }
Это волшебная кнопка. Нажатие на нее скроет или отобразит скрывающийся блок.
В CSS некоторые на первый взгляд простые вещи оказывается не так-то просто выполнить. Одной из таких вещей, является выравнивание, т.е. когда один элемент необходимо расположить определённым образом относительного другого.
В данной статье представлены некоторые готовые решения, которые помогут упростить работу по центрированию элементов по горизонтали и(или) по вертикали.
Примечание: под каждым решением приведен список браузеров с указанием версий, в которых указанный CSS код работает.
CSS - Выравнивание блока по центру1. Выравнивание одного блока по центру другого. При этом первый и второй блок имеют динамические размеры.
... ...
Parent { position: relative; } .child { position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%); }
2. Выравнивание одного блока по центру другого. При этом второй блок имеет фиксированные размеры.
Parent { position: relative; } .child { position: absolute; left: 50%; top: 50%; /* ширина и высота 2 блока */ width: 500px; height: 250px; /* Значения определяются в зависимости от его размера */ /* margin-left = - width / 2 */ margin-left: -250px; /* margin-top = - height / 2 */ margin-top: -125px; }
Браузеры, которые поддерживают данное решение:
3. Выравнивание одного блока по центру другого. При этом второй блок имеет размеры, заданные в процентах.
Parent { position: relative; } .child { position: absolute; /* ширина и высота 2 блока в % */ height: 50%; width: 50%; /* Значения определяются в зависимости от его размера в % */ left: 25%; /* (100% - width) / 2 */ top: 25%; /* (100% - height) / 2 */ }
Браузеры, которые поддерживают данное решение:
1. Выравнивание одного блочного элемента (display: block) относительно другого (в котором он расположен) по горизонтали:
... ...
Block { margin-left: auto; margin-right: auto; }
Браузеры, которые поддерживают данное решение:
2. Выравнивание строчного (display: inline) или строчно-блочного (display: inline-block) элемента по горизонтали:
... ...
Parent { text-align: center; } .child { display: inline-block; }
Браузеры, которые поддерживают данное решение:
1. Отцентровать один элемент (display: inline , display: inline-block) относительно другого (в котором он расположен) по центру. Родительский блок в этом примере имеет фиксированную высоту, которая задаётся с помощью свойства CSS line-height .
... ...
Parent { line-height: 500px; } .child { display: inline-block; vertical-align: middle; }
Браузеры, которые поддерживают данное решение:
2. Центрирования одного блока относительно другого по вертикали посредством представления родителя как таблицы, а ребёнка как ячейки этой таблицы.
Parent { display: table; } .child { display: table-cell; vertical-align: middle; }
Браузеры, которые поддерживают данное решение:
Если Вы знаете какие-нибудь другие интересные хитрости или полезные готовые решения по выравниванию, то поделитесь ими в комментариях.