[ Поиск ] - [ Пользователи ] - [ Календарь ]
Полная Версия: выравнивание по центру
dadli
здравствуите
есть радителски див таг, в нём есть дочерни див, хочу что дочерни див било би в центре радителского (по горизонтале), сделаю ето так, через атрибута алигн
<div id="parent" align="center" style="width: 100%;">
<div
id="childre" style="width: 100px; height: 100px; background-color: #090">
</div>
</div>



вопрос, а как можно сделат ето без атрибута алигн, на чистом css-е ?



Спустя 19 минут, 25 секунд (24.06.2012 - 01:16) l@pteff написал(а):
для отдельно взятого div'a можно просто так сделать

<center><div id="childre" style="width: 100px; height: 100px; background-color: #090"></center>

а для выравнивания текста юзать css
<div id="parent" style="width: 100%; text-align:center">

Спустя 25 минут, 43 секунды (24.06.2012 - 01:42) SoMeOnE написал(а):
 <div id="parent" style="width: 100%; border:1px solid; padding: 5px;">
<div
id="childre" style="border:1px solid; position: relative; left:50%; width: 100px; margin-right:50px">
zcsdfasds
</div>
</div>

Техника такая классическая. Должно сработать.

Спустя 5 минут, 41 секунда (24.06.2012 - 01:47) rooor написал(а):
margin: 0 auto; ?

Спустя 54 секунды (24.06.2012 - 01:48) SoMeOnE написал(а):
Еще можно так. Что т опервый вариант не очеь рабоатет. Не вижу где ошибка. margin-right:50px что то не срабатывает.
<div id="parent" style="width: 100%; border:1px solid; padding: 5px;">
<div
id="childre" style="border:1px solid; width: 100px; margin: 0 auto;">
zcsdfasds
</div>
</div>

Спустя 6 минут, 43 секунды (24.06.2012 - 01:55) SoMeOnE написал(а):
Но все таки классическая схема, когда мы даже не зная ширину родительского дива можем поставить по центру это вот так

<div style="border: 1px solid; padding: 5px;" id="parent">
<div
style="border: 1px solid; left: 50%; width: 100px; position: relative; margin-left: -50px;" id="childre">
zcsdfasds
</div>
</div>

Спустя 6 дней, 10 часов, 19 минут, 52 секунды (30.06.2012 - 12:15) Гость_Shkiper написал(а):
Короче в радительский падежь в стили допиши
text-align:center

Спустя 17 минут, 26 секунд (30.06.2012 - 12:32) sergeiss написал(а):
Цитата (dadli @ 24.06.2012 - 01:56)
вопрос, а как можно сделат ето без атрибута алигн, на чистом css-е ?

Как вариант, задать еще один ДИВ, дополнительный контейнер. Для него задаем положение 50% - это проценты относительно родительского ДИВа, т.е. от ширины экрана. И задаем ширину этого дива. А во вложенном ДИВе, который уже основной для показа, задаем margin-left:-50%, уже в процентах от размера "первого ребенка". В итоговом ДИВе размеры задаем в процентах.
<div id="parent" style="width: 100%;">
<div
id="first_children" style="position:relative; left:50%; width:100px; height:100px">
<div
id="childre" style="width: 100%; height: 100%; background-color: #090; margin-left:-50%;">
</div>
</div>
</div>

Похоже на то, что предлагал SoMeOnE, но мы можем спокойно задавать разные размеры. Положение будет меняться автоматически, т.е. не надо задавать margin в пикселях.
В итоге получаем универсальную хрень, которая должна работать не только с ДИВами, и уж точно никак не привязана ни к каким выравниваниями текстов, как тут предлагалось.

PS. Подредактировал, убрал "position:relative;" у внутреннего ДИВа.


_____________


когда чарли чаплин принимал участие в конкурсе: "клон чарли чаплинов", то чарли занимал третю позицию.

Быстрый ответ:

 Графические смайлики |  Показывать подпись
Здесь расположена полная версия этой страницы.
Invision Power Board © 2001-2025 Invision Power Services, Inc.