VPF::выравнивание div-ов по центру - Форум программистов

Grig

Дата 10.6.2010, 04:00 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 809
Регистрация: 29.4.2005
Где: Иркутск

Репутация: нет
Всего: 16

Здравствуйте!
Есть несколько div-ов идущих друг за другом, внутри контейнера.
Возможно ли их выровнять по центру относительно этого контейнера?

Код


<html>
<head>

<style>
.Container{
width:100%;
border:1px dashed;
text-align:center;
}
.divs{
height:20px;
width:20px;
float:left;
border:1px solid;
}
</style>

</head>
<body>

<div class="Container">
<div class="divs">1</div>
<div class="divs">2</div>
<div class="divs">3</div>
<div class="divs">4</div>
<div class="divs">5</div>
<div class="divs">6</div>
<div class="divs">7</div>
</div>

</body>
</html>

--------------------

A5uKa

Дата 10.6.2010, 07:27 (ссылка)

(нет голосов)

Загрузка ...

TЋ♥s F1rȜ iƧ BurȠiƞg

Профиль
Группа: Awaiting Authorisation
Сообщений: 1928
Регистрация: 30.8.2008

Репутация: нет
Всего: 16

Код


<div class="Container" align="center">

Mavrun

Дата 10.6.2010, 08:56 (ссылка)

(нет голосов)

Загрузка ...

Бывалый

Профиль
Группа: Участник
Сообщений: 199
Регистрация: 25.11.2007

Репутация: 9
Всего: 13

Код


.divs{margin:auto}

Это сообщение отредактировал(а) Mavrun - 10.6.2010, 08:56

Grig

Дата 10.6.2010, 10:04 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 809
Регистрация: 29.4.2005
Где: Иркутск

Репутация: нет
Всего: 16

Код


.Container{
width:100%;
border:1px dashed;
text-align:center;
vertical-align:middle;
}
.divs{
height:50px;
width:50px;
border:1px solid;
display:inline;
vertical-align:middle;
}

--------------------

bazel

Дата 18.6.2010, 23:40 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 3
Регистрация: 11.2.2010

Репутация: нет
Всего: нет

Выравнивание по горизонтали идущих друг за другом блоков (float) реализуется очень просто - смотри метод, описанный в статье выравнивание блоков по горизонтали. Там используется относительное смещение вправо и влево.

FightInGlory

Дата 20.6.2010, 10:41 (ссылка)

(нет голосов)

Загрузка ...

Шустрый

Профиль
Группа: Участник
Сообщений: 123
Регистрация: 14.11.2006

Репутация: 1
Всего: 1

2 Grig то что ты написал - бред. Данный способ лишь для вертикального выравнивания и то в IE6 он не работает, но можно подправить експрешеном.
2 Mavrun margin:0 auto работает лишь когда выравнивание относительно страницы, если же относительно какого-то блока, то не работает, а очень бы хотелось.
HTML

Код


<div id="container">
  <div id="block-left">
    <div id="block-right">1</div>
    <div id="block-right">2</div>
    <div id="block-right">3</div>
    <div id="block-right">4</div>
    <div id="block-right">5</div>
    <div id="block-right">6</div>
    <div id="block-right">7</div>
  </div>
</div>

CSS

Код


* {
    padding:0; 
    margin:0;
    }
#container {
    border:1px green dashed;
    height:100px;
    }
#block-left {
  position: relative;
  float: left;
  left: 50%;
  border:1px blue dotted;
}
#block-right {
  position: relative;
  float: left;
  right: 50%;
  border: 1px solid red;
  width:100px;
  height:100px;
  text-align:center;
}

Border я не убрал для наглядности. Зеленая рамка - контейнер, красные это блоки в ряд, а синий блок, выполняет роль подушки, для того, чтобы каркас тянулся правильно, а не прыгал.
Проверял с IE5.5 ++, FF, GH, Opera.

Violator

Дата 22.6.2010, 12:24 (ссылка)

(нет голосов)

Загрузка ...

Бывалый

Профиль
Группа: Участник
Сообщений: 234
Регистрация: 10.1.2009

Репутация: 15
Всего: 15

FightInGlory,

Цитата

2 Grig то что ты написал - бред. Данный способ лишь для вертикального выравнивания и то в IE6 он не работает, но можно подправить експрешеном.

А в чем собственно бред, и зачем экспрешен?
Просто вместо inline нужно использовать inline-block, для ИЕ6-7 использовать inline+hasLayout, и избавится от отступов между блоками

Код


* { margin: 0; padding: 0; }
.container{
border:1px dashed;
text-align:center;
font-size: 0; /* remove whitespace */
letter-spacing: -1px; /* for WebKit */
}
.divs{
height:50px;
width: 50px;
border:1px solid;
display:inline-block;
font-size:16px; /* return font-size */
letter-spacing: normal; /* return letter-spacing */
}
* html .divs{ display: inline; }
*+html .divs{ display: inline; }

Это сообщение отредактировал(а) Violator - 22.6.2010, 13:33

Mavrun

Дата 22.6.2010, 17:39 (ссылка)

(нет голосов)

Загрузка ...

Бывалый

Профиль
Группа: Участник
Сообщений: 199
Регистрация: 25.11.2007

Репутация: 9
Всего: 13

2FightInGlory
вообще-то работает =)
покажите код, где не работает, может там что-то не то прописано

1 Пользователей читают эту тему (1 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| Вёрстка веб-сайтов \| Следующая тема »