Центрирование Div

Киприот · 29.06.2013

Здравствуйте, уважаемые форумчане! Подскажите, пожалуйста, как мне разместить DIV по центру?

Варианты с margin: 0 auto; margin: 0 50%; text-align: center; почему-то не работают. Спасибо!

Index.html

Код:

<!DOCTYPE HTML>
<html>
<head>
<title>Имя сайта</title>
<meta charset="utf-8" />
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="container">
<div id="line_1"></div>
<div id="pol">Это должно быть в центре</div>
</div>
</body>
</html>

CSS

Код:

body, html{
background-image: url(images/fon.jpg);
margin: 0px;
text-align: center;
}
#line_1{
width: 100%;
height: 170px;
background-image: url(images/01.jpg);
position: absolute;
margin: 0;
}
#pol{
width: 1024px;
height: 864px;
background-image: url(images/02.png);
position: absolute;
margin: 67px 50%;
}

sergei_bratishev · 30.06.2013

Код:

margin: auto;

или

Код:

margin-left: 50%;
position: relative;
left: -512px;

Киприот · 30.06.2013

sergei_bratishev сказал(а):
Код:

margin: auto;

или

Код:

margin-left: 50%; position: relative; left: -512px;

Спасибо, второй вариант помог, но нужно абсолютное позиционирование.Необходимо опустить содержимое <div id="pol"></div>.

Я конечно могу присвоить DIV #line_1 - position: relative; и DIV #pol - отрицательный margin-top, но будет ли это правильно?

eelijah · 03.07.2013

Код:

body, html{
background-image: url(images/fon.jpg);
margin: 0px;
text-align: center;
}
#line_1{
width: 100%;
height: 170px;
background-image: url(images/01.jpg);
position: absolute;
margin: -67px 0;
background: #3123d2
}
#pol{
width: 1024px;
height: 864px;
background-image: url(images/02.png);
position: relative;
margin: 67px auto;
background: #dddddd;}

ввел для наглядности цвет фона.
Я так понимаю так нужно?

Киприот · 04.07.2013

eelijah сказал(а):
Код:

body, html{ background-image: url(images/fon.jpg); margin: 0px; text-align: center; } #line_1{ width: 100%; height: 170px; background-image: url(images/01.jpg); position: absolute; margin: -67px 0; background: #3123d2 } #pol{ width: 1024px; height: 864px; background-image: url(images/02.png); position: relative; margin: 67px auto; background: #dddddd;}

ввел для наглядности цвет фона.
Я так понимаю так нужно?

Спасибо! =)

mrlasking · 04.07.2013

Ну вот зачем извращаться? Зачем абсолютное позиционирование? Зачем ненужное присвоение position? Давайте верстать правильно. Чуть-чуть логики добавляем и все становится очень просто: http://jsfiddle.net/mrlasking/vybvZ/

CamaroSS · 04.07.2013

Я вот не пойму, в чём смысл использования псевдоэлемента :after вместо полноценного элемента с clear: both? Во-первых, :after не все понимают, во-вторых, в данном примере это вообще не нужно, потому что плавающих элементов нет.

mrlasking · 04.07.2013

[member=CamaroSS], если не понимаете - то подумайте) Для меня правило clearfix стало уже привычкой и верным помощником в верстке. Уж извините, прописал чисто на автомате. Уберите его и в данном случае ничего не поменяется. Суть ведь не в нем.

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

Если не по сабжу, а по вашему комменту. Чистый clear: both меня подводил не раз, а вот мой маленький питомец (clearfix правило) - ни разу. Так же, использование этого правила не вредит семантике и структуре страницы. Так что я использовал и буду использовать =) Я ведь вас не заставляю :huh:

P.S. Вместо придирок к несущественному правилу, помогли бы человеку раньше

Киприот · 06.07.2013

mrlasking сказал(а):
Ну вот зачем извращаться? Зачем абсолютное позиционирование? Зачем ненужное присвоение position? Давайте верстать правильно. Чуть-чуть логики добавляем и все становится очень просто: http://jsfiddle.net/mrlasking/vybvZ/

В верстке я пока новичок и пока не все еще знаю. Без абсолютного позиционирования иногда никак не выходит переместить элемент в то место на странице, куда хотелось бы. И если прописывать margin: *px *px; блок все равно стоит как вкопанный.

lekzd · 07.07.2013

Киприот сказал(а):
Без абсолютного позиционирования иногда никак не выходит переместить элемент в то место на странице, куда хотелось бы. И если прописывать margin: *px *px; блок все равно стоит как вкопанный.

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

mrlasking · 07.07.2013

Киприот сказал(а):
В верстке я пока новичок

Мой комментарий в бОльшей степени относился к старшим товарищам, которые сразу не пояснили как правильно делать) А вы учитесь и все будет =)

lekzd · 07.07.2013

sergei_bratishev сказал(а):
margin-left: 50%; position: relative; left: -512px;

Это безобразие для IE 5-6 мы больше не потерпим

Киприот · 07.07.2013

mrlasking сказал(а):
Киприот сказал(а):

В верстке я пока новичок

Нажмите, чтобы раскрыть...

Мой комментарий в бОльшей степени относился к старшим товарищам, которые сразу не пояснили как правильно делать) А вы учитесь и все будет =)

Спасибо! =)

Киприот · 07.07.2013

Мне таки подсказали.

Код:

margin: 0 auto;
width: 1000px;

Оказалось что нужно было указать width, чтобы оно работало. :biggrin: Всем спасибо!

mrlasking · 08.07.2013

Киприот сказал(а):
Оказалось что нужно было указать width, чтобы оно работало.

Я вам, в примере, так и написал

Центрирование Div

Киприот

Member

sergei_bratishev

Well-Known Member

Киприот

Member

eelijah

Well-Known Member

Киприот

Member

mrlasking

$_GET['rich'] or die('trying');

CamaroSS

Well-Known Member

mrlasking

$_GET['rich'] or die('trying');

Киприот

Member

lekzd

parse error: parse error, unexpected T_STRING...

mrlasking

$_GET['rich'] or die('trying');

lekzd

parse error: parse error, unexpected T_STRING...

Киприот

Member

Киприот

Member

mrlasking

$_GET['rich'] or die('trying');

Онлайн статистика

Статистика форума

Новые пользователи

Поделиться этой страницей