Модераторы: Illuminaty
  

Поиск:

Ответ в темуСоздание новой темы Создание опроса
> выравнивание 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>



--------------------
        
PM MAIL ICQ   Вверх
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">

PM   Вверх
Mavrun
Дата 10.6.2010, 08:56 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Бывалый
*


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

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



Код

.divs{margin:auto}


Это сообщение отредактировал(а) Mavrun - 10.6.2010, 08:56
PM MAIL   Вверх
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;
}



--------------------
        
PM MAIL ICQ   Вверх
bazel
Дата 18.6.2010, 23:40 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Новичок



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

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



Выравнивание по горизонтали идущих друг за другом блоков (float) реализуется очень просто - смотри метод, описанный в статье выравнивание блоков по горизонтали. Там используется относительное смещение вправо и влево.
PM MAIL   Вверх
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.
PM MAIL   Вверх
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
PM MAIL   Вверх
Mavrun
Дата 22.6.2010, 17:39 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Бывалый
*


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

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



2FightInGlory
вообще-то работает =) 
покажите код, где не работает, может там что-то не то прописано
PM MAIL   Вверх
  
Ответ в темуСоздание новой темы Создание опроса
0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема | Вёрстка веб-сайтов | Следующая тема »


 




[ Время генерации скрипта: 0.0941 ]   [ Использовано запросов: 21 ]   [ GZIP включён ]


Реклама на сайте     Информационное спонсорство

 
По вопросам размещения рекламы пишите на vladimir(sobaka)vingrad.ru
Отказ от ответственности     Powered by Invision Power Board(R) 1.3 © 2003  IPS, Inc.