Слои по центру

[kentastik]

Здрасти, не могу найти такую вроде простую вещь, помогите пожалуйста. У меня есть несколько слоев (неопределенное количество) я хочу, чтобы они выводились по центру странички. Делаю контейнер, в нем несколько слоев. Если применить float, тогда не получается чтобы слои были посередине, если применить не применять то слои получатся в столбик. Каждый слой имеет фиксированные размеры и у всех слоев они одинаковые. Как это реализовать?

[Нет]

kentastik, основному контейнеру, в котором находится всё остальное, задайте ширину и «margin: 0 auto;» (0 в данном случае — верхний отступ контейнера, можно задать любое значение, какое вам нужно).

[kentastik]

наверное плохо объяснил, вот что я натворил, где не так?

<style type="text/css"> 

.banners { 
	background: #000000;
	width:100%;
	margin: 0 auto;
}

.footerbanner2 {
height: 48px;
width: 92px;
text-align: right;
padding: 5px;
padding-top: 13px;
float: right;
font:Arial, Helvetica, sans-serif;
font-weight:bold;
font-size: 12px;
background:#3333FF;
}

.footerbanner1 {
height: 68px;
width: 162px;
background: #ccc;
margin: 5px auto;
float: left;
}

</style>
<div class="banners">

<div class="footerbanner1"><div class="footerbanner2">Блок 01</div></div>

<div class="footerbanner1"><div class="footerbanner2">Блок 02</div></div>

<div class="footerbanner1"><div class="footerbanner2">Блок 03</div></div>

<div class="footerbanner1"><div class="footerbanner2">Блок 04</div></div>

<div class="footerbanner1"><div class="footerbanner2">Блок 05</div></div>

<div class="footerbanner1"><div class="footerbanner2">Блок 06</div></div>

<div class="footerbanner1"><div class="footerbanner2">Блок 07</div></div>

<div class="footerbanner1"><div class="footerbanner2">Блок 08</div></div>

</div>

надо чтобы блоки выравнивались по ЦЕНТРУ, а у меня получается, что по левому краю

[Okula]

надо чтобы блоки выравнивались по ЦЕНТРУ, а у меня получается, что по левому краю

Это указывается в .body

.body { margin: auto; }

[kentastik]

не работает так, я уже пробовал

[eVErl@Sting]

Я бы не назвал это простой вещью, по крайней мере я решить проблему не смог. У тебя там флоат лефт, а это все равно что выравнивание по левому краю и если даже верхние блоки по центру сделать то перенос блока при сужении браузера все равно будет по левой стороне, в общем интересно будет увидеть работающий вариант если кто сделает.

[psywalker]

width:100%;

margin: 0 auto;

Расскажите мне, как можно выровнять 100% по центру?

[rus]

Расскажите мне, как можно выровнять 100% по центру?

можно, ага, если родителю задать 110%

[kentastik]

Расскажите мне, как можно выровнять 100% по центру?

это мусор, который остался после 2 часов экспериментов.

eVErl@Sting, я и говорю как без флоата обойтись то?

[psywalker]

можно, ага, если родителю задать 110%

Согласен

[Нет]

kentastik, если я правильно понимаю вашу задачу, то контейнеру нужно задать «text-align: center», а внутренним элементам — «display: inline-block». Могу рассказать подробно, как добиться кроссбраузерности и убрать появляющиеся между элементами отступы, но всё это легко можно найти в интернете и без меня.

[Okula]

Я бы не назвал это простой вещью, по крайней мере я решить проблему не смог. У тебя там флоат лефт, а это все равно что выравнивание по левому краю и если даже верхние блоки по центру сделать то перенос блока при сужении браузера все равно будет по левой стороне, в общем интересно будет увидеть работающий вариант если кто сделает.

Всё просто, как это сделать я уже написал в 4 посте, у меня всё работает http://dzwap.ru

[Aurica]

А почему такой сложный код? разве не проще все сделать используя левую границу?

<style type="text/css">

body{
}
.banners {
	background: #000000;
	margin: 0 auto;
	width:90%;
}
.banner_class{
  float:left;
  width:92px;  /*единственное, надо поиграться с размерами, установить правильные padding и margin*/
  height:68px;
  margin:5px auto; /*тут auto не имеет никакого действия вроде, блоки вне стандартного потока, поэтому бесполезно.*/
  padding:13px 5px 5px 5px;
  border-left:70px solid #ccc;
  background-color: #3333FF;
  text-align:right;
  font:Arial, Helvetica, sans-serif;
  font-weight:bold;
  font-size: 12px;
}

</style>
  </head>
  <body>
<div class="banners">
  <div class="banner_class">Блок 01</div>
  <div class="banner_class">Блок 02</div>
  <div class="banner_class">Блок 03</div>
  <div class="banner_class">Блок 04</div>
  <div class="banner_class">Блок 05</div>
  <div class="banner_class">Блок 06</div>
  <div class="banner_class">Блок 07</div>
  <div class="banner_class">Блок 08</div>
<!-- <div style="clear:both"></div>-->
</div>

Выглядит гораздо пристойнее... Если вы хотите разместить по центру блок banners, то вам нужно указать ему ширину (мне, по крайней мере, хватало такого выхода, другого способа пока не искала).

Если же вам нужно разместить по центру содержимое внутри блока banners... к сожалению как это сделать - не знаю.

У вас у блока banners указан черный фон, в таком виде блок схлопывается и фон не виден, если вам надо, чтобы был виден черный фон - укажите любой элемент внутри этого блока с свойством clear:both, например div

Edited December 24, 2010 by Aurica

[kentastik]

А почему такой сложный код? разве не проще все сделать используя левую границу?

  margin:5px auto; /*тут auto не имеет никакого действия вроде, блоки вне стандартного потока, поэтому бесполезно.*/

какбе по моей супер задумке блоки не должны стоять склееные вот и всё обьяснение.

Если же вам нужно разместить по центру содержимое внутри блока banners... к сожалению как это сделать - не знаю.

У вас у блока banners указан черный фон, в таком виде блок схлопывается и фон не виден, если вам надо, чтобы был виден черный фон - укажите любой элемент внутри этого блока с свойством clear:both, например div

ну там дальше как раз был див с клиром, не стал копировать как само-собой разумеющееся.

Всё просто, как это сделать я уже написал в 4 посте, у меня всё работает http://dzwap.ru

я что-то не вижу на сайте ничего похожего

kentastik, если я правильно понимаю вашу задачу, то контейнеру нужно задать «text-align: center», а внутренним элементам — «display: inline-block». Могу рассказать подробно, как добиться кроссбраузерности и убрать появляющиеся между элементами отступы, но всё это легко можно найти в интернете и без меня.

если бы у меня так завелось в осле темы бы не было, если не сложно расскажите про кроссбраузерность этого метода

[eVErl@Sting]

Всё просто, как это сделать я уже написал в 4 посте, у меня всё работает http://dzwap.ru

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

[Okula]

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

[kentastik]

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

центр резиновый, блоков может быть как 5 штук так и 20. каким образом? Они выровняца по левому краю и будет не очень красиво

[Great Rash]

Ну вы, блин, даёте...

http://www.jsfiddle.net/m82hk/

[kentastik]

Ну вы, блин, даёте...

http://www.jsfiddle.net/m82hk/

что-то не открывается

[psywalker]

Ну вы, блин, даёте...

Прям как Генерал сказал

А ссылочка твоя не пашет кстати)

[Aurica]

какбе по моей супер задумке блоки не должны стоять склееные вот и всё обьяснение.

Так в чем проблема? Нужно это?

.banner_class{
  ...
  margin:5px;
  ...
}

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

[kentastik]

Так в чем проблема? Нужно это?

.banner_class{
  ...
  margin:5px;
  ...
}

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

простите, вы ветку читали? в каком еще сообщении надо написать, что блоки надо выравнивать по ЦЕНТРУ. К тому же черная область резиновая и при изменении ее размеров всё должно остаться по ЦЕНТРУ.

[Great Rash]

Дубль два: http://cssdesk.com/24Jjq

[kentastik]

спасибо за идею

[Aurica]

простите, вы ветку читали? в каком еще сообщении надо написать, что блоки надо выравнивать по ЦЕНТРУ. К тому же черная область резиновая и при изменении ее размеров всё должно остаться по ЦЕНТРУ.

читала. Из всего моего поста вы сказали только про склеенность блоков, да про див с клиром, на это и ответила. Поняла так, что остальное вас устраивает.

Значит помочь не могу, пробуйте как Great Rash сказал