Выравнивание по вертикали дива
Здравствуйте, как можно выравнить точно по центру(по вертикали) блок div, не зависимо от разрешения экрана? То есть если у монитора разрешение 800 на 600 див точнопо центру(вертикально) или если 1366 на что то там) Тото же по центру)
При чём выравнивание было бы и по горизонтали то же |
вЫсота блока жестко задана?
|
Да, жёстко
|
position:absolute;top:50%;
margin-top:-высота блока в px; |
Ещё было бы здорово одновременно по ширине и по высоте центрировать :)
|
Гугл, не?
|
Не :(
|
Забанили?
|
По ширине то понятно margin: 0px auto;
А вот как по высоте и ширине сделать) |
Всем спасибо, додумал)
|
ansi_str,
Самое простое воткнуть в таблицу с прозрачным фоном и бордерами <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru" lang="ru" dir="ltr"> <body> <table style="position:fixed;width:100%;height:100%"><tr valign=center align=center><td><div style="background-color:red;width:400px;height:250px"></div></td></tr></table> </body> </html> |
Цитата:
Нужно margin-top:-(1/2 * высота блока); |
Цитата:
|
Вот вам пару вариантов юзайте последний уже описывали выше.
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8"/>
<title>тест</title>
<style>
[class^=over]{
width:200px;
height:200px;
background:green;
border:1px solid red;
}
[class^=over] div{
width:50px;
height:50px;
background:red;
}
.over1{
line-height:200px;
text-align:center;
}
.over1 div{
display:inline-block;
vertical-align:middle;
}
.over2{
display:table-cell;
vertical-align:middle;
}
.over2 div{
margin:0 auto;
}
.over3{
position:relative;
}
.over3 div{
position:absolute;
margin:auto;
top:0;
bottom:0;
right:0;
left:0;
}
.over4{
position:relative;
}
.over4 div{
position:absolute;
margin:-25px 0 0 -25px;
top:50%;
left:50%;
}
</style>
</head>
<body>
<div class="over1">
<div></div>
</div>
<div class="over2">
<div></div>
</div>
<div class="over3">
<div></div>
</div>
<div class="over4">
<div></div>
</div>
</body>
</html>
|
Цитата:
|
Цитата:
|
Seva1986,
1. Ваша логика Оч задириста и не тактична Второе, Выше приведенный код в посте 12, я уже постил в теме, он мну не интересен В третьих - у данного метода есть траблы в Ие при масштабировании страницы, Ваш код в ИЕ=> http://uploads.ru/?v=WVNep.png В четвертых - подразумевайте, что есть люди профессионально занимающимися некоторыми фишками, и что очевидная на первый взгляд ерунда для Вас - может являться опытом долгой практики! |
Deff,
1 повторю научитесь реагировать на критику, то что вы написали это очень устаревшее решение из эпох 6-7 осла а может и раньше. сейчас это попросту говнокод. 2 я про это сам сказал Цитата:
4 как бы это странно не звучало я сам человек Цитата:
P.S. по сравнению с некоторыми другими вещами эта задача действительно ерунда;) |
Цитата:
|
Seva1986,
В 8 тож криво Кому нужны "Новые красивые решения" -не добавляющие функциональности ? 15% Пользователей Сайта - отсечено Я бы Вас уволил |
Deff,
Для особо одарённых во второй раз повторяю я не проверял во всяких недобраузерах. я просто показал примеры решений. еслиб нужно было под любой конкретный браузер сделать я бы сделал. кстати если в режим 8 из 9 переключиться то всё нормально. Да и вообще если не работает то через условные коменты делать элементрано. А по поводу увольнений ты видимо совсем глупый еслиб ты меня уволил по несоответствию, это просто тупо, да и с чего ты взял что я на тебя работал бы, да я профессиональный верстальщик который знает свою цену. И да я перешёл с тобой на ты лень мне тебе выкать, если до тебя не доходит то что я тебе объясняю. Мне в тех темах в которых я не шарю и похуже отвечали и ничего нормально благодарил за то что объясняли, а ты критику не воспринимаешь. А мог бы сказать спасибо, и принять к сведению, а не выпендриваться. Хватит флудить короче, тут любой видит кто правильнее решения предложил. Пока! |
Укажите Любого из гуру, кто скажет что снижение функциональности кода, есть правильное решение!
Укажите любого, кто скажет, что минусы в карму с Вашим комментом - есть правильная критика! Укажите любого, кто скажет, что высказывания в топике "говногод"(не в первый раз замечу!) - есть адекватный подход опытного спеца! С такими высказываниями в темах, - Вы лишь дискредитируете известный ява-форум |
Цитата:
Для меня лично устаревшее то, что реально можно заменить во всех браузерах под которые я пишу сайт. Если ишак не умеет что-то делать, то я пожертвую новыми возможностями вставив то что по вашему мнению устаревшее, но работает везде. Нежели буду лепить новыми возможностями кривизну в старых браузерах. |
devote,
Читай внимательно мои предыдущие посты прежде чем писать мне. Цитата:
Цитата:
А такие как ты которые поощряют этих некрофилов как раз основная причина того что пользователи довольно комфортно себя чувствуют на всяком старье и им лень поставить нормальный браузер (не всегда конечно в этом причина иногда просто не могут по ряду причин, но таких вообще очень мало да и у большинства дома нормальные компы). И ещё одно, лучше писать нормальный код который работает не везде, чем говнокодить ради того чтобы во всяком дерьме это поддерживалось, а если дерьмо так сильно важно то в одельном css или скрипте фиксим |
Цитата:
Цитата:
Цитата:
Цитата:
Цитата:
И мне срать на ваше мнение и чее либо. Может для вас это старье, для меня по стандарту работает. Если спецификация не запрещает, сайт не тормозит, то меня вполне устраивает. Мои сайты все валидны, запретов на таблицы нет. Хотя я и не так часто их юзаю но например в верстке форм, почти всегда (Ибо формы верстать терпеть ненавижу). И тупое понятие что блочная верстка это круто и все такое, об этом лишь лохи кричат, а когда дело доходит до реально сложной верстке, вся их блочная верска идет в жопу, потому как все начинает ехать, съезжать и т.д. Я уж не говорю о резиновых сайтах, дык там вообще блочной версткой много не сделаешь. Цитата:
|
devote,
Не тратьте время и нервы - на троля - Двуличный тип, юлит перед начальством и выделывается в топиках. Позволил бы он подобные высказывания в в кабинете начальства? Нет, - только пользуется безнаказанной площадкой, красуется собственной позицией. |
:lol:
|
Развели срач на три страницы!
По вертикали центруется либо через таблицы (или table-cell) - но этот вариант крайне не рекомендуется (могут вылезти уже другие баги), хотя если высота блоков не известна - это единственный вариант. Если высота известна то лучше через позиционирование и top:50%;margin-top:-x/2. Всё остальное (всякие дополнительные обёртки, inline-block и line-height) - специфическая ерунда, редко находящая применение. По горизонтали, самое простое - родителю text-align:center. |
|
Seva1986,
И что там такого сверхъестественного??? Четыре способа, которые работают при известной высоте. Если такой крутой - накидай мне несколько вариантов полного центрирования без заранее заданных размеров - таблицы и их эмуляцию оставим в покое. |
Цитата:
|
Цитата:
|
Deff,
ну харе говнокодить ламер, он не по центру. увеличь высоту хотя бы на 200 рx :lol: |
Nanto,
вот, изменил только размеры блоков больше ничего не трогал кроме первого и последнего способа все правильно работают, если не нравяться эмуляции таблиц убери 2 способ и останеться 3 мой любимый .over3 div{
position:absolute;
margin:auto;
top:0;
bottom:0;
right:0;
left:0;
}
:victory: <!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8"/>
<title>тест</title>
<style>
[class^=over]{
width:400px;
height:300px;
background:green;
border:1px solid red;
}
[class^=over] div{
width:60px;
height:80px;
background:red;
}
.over1{
line-height:200px;
text-align:center;
}
.over1 div{
display:inline-block;
vertical-align:middle;
}
.over2{
display:table-cell;
vertical-align:middle;
}
.over2 div{
margin:0 auto;
}
.over3{
position:relative;
}
.over3 div{
position:absolute;
margin:auto;
top:0;
bottom:0;
right:0;
left:0;
}
.over4{
position:relative;
}
.over4 div{
position:absolute;
margin:-25px 0 0 -25px;
top:50%;
left:50%;
}
</style>
</head>
<body>
<div class="over1">
<div></div>
</div>
<div class="over2">
<div></div>
</div>
<div class="over3">
<div></div>
</div>
<div class="over4">
<div></div>
</div>
</body>
</html>
PS и да, я крутой! |
Цитата:
|
Seva1986,
блока который центруется, хотя бы. |
Seva1986,
"кртутой", и что ты там изменил? убери размеры у вложенного блока (заодно можешь убрать и у родительского, ради прикола ;)) - куда твоё центрирование делось? |
Цитата:
Я показал 4 варианта для разных ситуаций, ты начал говорить Цитата:
Более правильные варианты это css3 но о них пока рано. |
devote,
Не пиздел бы ты хрень всякую, ты не знаешь моих работ как и я твоих, поэтому не говори про то что ты там видел, если ты табличный говнокодер то дело твоё. Не надо говорить что и как я могу сделать, на квадратике не на квадратике. ты чисто бред несёшь. Кстати вот ты говришь что мои варианты с центрированием говно ану покажи свой чтобы он отличался от моих как ты сказал говнокодерских только не надо щас про флексбокс писать или грид ит.д. а то флудишь херню всякую а умного нихрена не написал. И вообще причём сдесь сайт не сайт, я для особо тупых в сотый раз повторяю я показал 4 варианта если нужно сайт центрировать то через ячейку вариант, или с line-height (если размеры не известны) |
О чём речь вообще???
Я к тому, что развели срач на несколько страниц - в Гугле всех забанили? Хотя бы вот - зачем далеко ходить: http://learn.javascript.ru/css-center Но как писал devote, всё это идеализированные примеры - что будет с этими центрующимися блоками при переполненнии контентом, при наличии плавающих блоков и прочая... |
| Часовой пояс GMT +3, время: 18:49. |