25.04.2014, 09:26
|
|
Аспирант
|
|
Регистрация: 22.08.2013
Сообщений: 57
|
|
|
div по центру
Здравствуйте, подскажите как выровнять div по центру экрана ( по горизонтали и вертикали ), если ширина и высота у него заданы в процентах
|
|
25.04.2014, 09:51
|
|
|
|
Регистрация: 10.07.2008
Сообщений: 3,873
|
|
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>…</title>
<style>
html, body, .wrapper {
height: 100%;
}
.wrapper {
display: flex;
}
.centered {
width: 50%;
height: 50%;
margin: auto;
background-color: #3fc;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="centered">Centered</div>
</div>
</body>
</html>
Последний раз редактировалось Octane, 26.04.2014 в 10:29.
|
|
25.04.2014, 21:36
|
|
Аспирант
|
|
Регистрация: 12.09.2012
Сообщений: 35
|
|
Сообщение от yriiarutiunian
|
|
Здравствуйте, подскажите как выровнять div по центру экрана ( по горизонтали и вертикали ), если ширина и высота у него заданы в процентах
|
Смотря для каких целей нужен блок. Есть такой способ, работает даже на IE8. Чистый CSS. Без JS и CSS3
Пример тут
html,
body {
position: relative;
min-height: 100%;
}
html {
height: 100%;
}
.block-vertical {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 100%;
height: 100%;
font-size: 0.001px;
text-align: center;
}
.block-vertical:before {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
}
.block-vertical-middle {
display: inline-block;
width: 80%;
height: 70%;
max-width: 100%;
font-size: 14px; /* font-size: 1rem; */
vertical-align: middle;
border: 1px solid #f00;
}
<div class="block-vertical">
<div class="block-vertical-middle">Блок по центру страницы</div>
</div>
|
|
26.04.2014, 09:20
|
 |
Профессор
|
|
Регистрация: 11.09.2010
Сообщений: 8,804
|
|
BelkinV, если нужен фиксированный блок, то не проще так?
__________________
В личку только с интересными предложениями 
|
|
28.04.2014, 16:48
|
|
Аспирант
|
|
Регистрация: 25.04.2014
Сообщений: 47
|
|
|
Горизонталь:
у блока margin 0 auto, у его родителя text align center
Вертикаль, лень писать скрипт... суть в том, что взять надо высоту дока без учета отступов, высоту блока с учетом бордеров, вычесть разницу и поделить ее на 2, округлить, результат релативом от верху(в топ).... а если не подойдет применение релатива, то через абсолют, но тогда придется добавить обертку, от которой и будет проходить позиционирование блока но тогда она должна быть такой же ширины, как блок, блоку тогда и лефт прописать 0.... ну и к обертке применить описанное к горизонтали...
Ну чисто стилями по вертикали не выровнять без таблиц но и там свои нюансы по вертикальному выравниванию, точно не помню, но вроде блочные элементы не выравниваются... вообщем не парюсь по этому поводу
before, after и тп хрень не работает в куче мобильных или облегченных браузеров, смотря просто на что ориентирован сайт, под то и подстраиваться... некоторые забивают на всякие недобраузеры или относительно старые версии, в некоторых случаях это недопустимо и приходится искать более простые пути решения.
Последний раз редактировалось M-ka, 28.04.2014 в 16:54.
|
|
28.04.2014, 18:25
|
|
|
|
Регистрация: 10.07.2008
Сообщений: 3,873
|
|
|
Сообщение от M-ka
|
|
Ну чисто стилями по вертикали не выровнять без таблиц
|
Тут уже предложили 3 варианта:
1. margin: auto для flexbox
2. margin: auto для для абсолютно позиционированного блока
3. vertical-align: middle для inline-block
|
Сообщение от M-ka
|
|
before, after и тп хрень не работает в куче мобильных или облегченных браузеров
|
Мы уже в 2014 году! |
|
28.04.2014, 18:47
|
|
Аспирант
|
|
Регистрация: 25.04.2014
Сообщений: 47
|
|
Octane,
1,2 С каких пор margin auto кроссбраузерно?  Особенно для вертикали....
3. Читаем внимательно и до конца, а не вырываем из контекста...
4. Да, мы уже в 2014 году, но разработчики браузеров для мобильных устройств, телевизоров и прочей подобной недотехники, все еще нет... Очень много обыденного для PC браузеров винды(про ай вообще молчу, да и отличие местами под линуксы, не говорю о шрифтах, а о том, как отрабатывают базовые функции, что они возвращают... а какой ужас, когда это не какой то с распространенных браузеров. Порой даже хром чудит, как между версиями, так и между ОС) все еще не доступно на портативное устройство, тв и прочую технику!
Техника, где уже не выходят обновления из-за устаревания ОС, особенно если она не с массово распространенных... их продолжают использовать. Не во всех случаях можно забивать на конечного пользователя. Вот чувак допустим купил плазму за 3-7куе в 2012м году свежую модельку, обновлений для браузера спустя 2 года нет, заходит на какой то сайт с платным контентом или где можно сделать заказ, а тут бац и он весь разваливается.... Думаю этот человек не выкинет свой тв но и не побежит к буку/планшету/мобилке/стац компу.... а просто свалит с такого гамносайта на другой, а это уже упущенная выгода для ресурса... Если человек еще в саппорт обратиться, что сайт гамно и на его плазме которой только 2года, все разваливается и он не может пользоваться услугами, за которые заплатил или хотел преобрести..., если один два таких в месяц/квартал то возможно проигнорят, но а если таких будут сотни, будут по ушах ездить разработчику, вплоть до смены такового.... ибо выкинуть технику клиенту предлагать не будут...
Не следует думать, что на тв и тп технику обновы столь же стабильно выходят, как для обычных компов.... подобная техника поддерживается первый год, максимум два, дальше идет отказ от поддержи этой модели, не будут заниматься портированием под старье новых фитч во встраиваемый софт, ни кто и ни где, особенно если техника имеет жесткие аппаратные ограничения...
Вот у меня даже сейчас случай, купил аппарат, модель свежая 2014го года, среднего ценового диапазона, ОС конца предыдущего, пока обновлений особых нет. Хочу сетапать и пользовать разный софт, часть платного, в большинстве случаев находил нужный но столкнулся с определенными проблемами благодаря разработчикам. Вроде и приложение раскрученное, ну денег не мало но и не много просят... Но им(конторе, разрабатывающей и продающей приложение) проще вернуть деньги за приобретенный пользователем софт нежели вносить изменения в таковой, что бы устранить проблему, связанную с завтыком их разработчика. Так же думал тот разраб, что мы в 2014м году и последняя версия ОС будет норм да и железо в этом году со всем справится, да и есть не мало с требований, которым должно оно удовлетворять для сетапа ОС, а не тут то было... Думаю там еще будут задалбывать саппорт люди, которые купили софт, но потом не смогут пользоваться...
Вот такой 2014й год.... провтыкали в разработке, сделали баг благодаря недочету, пофиг, не получили/вернули денег, пофиг, зубы на полку, пофиг... зато 2014й год
Последний раз редактировалось M-ka, 28.04.2014 в 19:31.
|
|
28.04.2014, 19:26
|
|
Профессор
|
|
Регистрация: 11.09.2010
Сообщений: 8,804
|
|
|
Сообщение от M-ka
|
|
С каких пор margin auto кроссбраузерно? Особенно для вертикали....
|
А в каких браузерах оно не работает?
__________________
В личку только с интересными предложениями
|
|
28.04.2014, 19:27
|
 |
Профессор
|
|
Регистрация: 30.04.2012
Сообщений: 3,018
|
|
danik.js, в некоторых мобильных, или даже во всех. Я про это:
bottom: 0;
left: 0;
margin: auto;
right: 0;
position: fixed/absolute;
top: 0;
|
|
28.04.2014, 19:28
|
|
|
|
Регистрация: 10.07.2008
Сообщений: 3,873
|
|
|
Сообщение от M-ka
|
|
С каких пор margin auto кроссбраузерно?
|
Для абсолютного позиционирования всегда было кросс-браузерно.
Дальше не осилил, многа курсивных букаф |
|
|
|
