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

kentastik · December 22, 2010

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

Нет · December 22, 2010

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

kentastik · December 22, 2010

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

<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 · December 22, 2010

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

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

.body { margin: auto; }

kentastik · December 23, 2010

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

eVErl@Sting · December 23, 2010

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

psywalker · December 23, 2010

width:100%;
margin: 0 auto;

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

rus · December 23, 2010

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

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

kentastik · December 23, 2010

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

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

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

psywalker · December 23, 2010

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

Согласен

Нет · December 23, 2010

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

Okula · December 23, 2010

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

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

Aurica · December 24, 2010

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

<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 · December 24, 2010

А почему такой сложный код? разве не проще все сделать используя левую границу?
  margin:5px auto; /*тут auto не имеет никакого действия вроде, блоки вне стандартного потока, поэтому бесполезно.*/

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

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

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

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

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

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

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

eVErl@Sting · December 24, 2010

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

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

Okula · December 24, 2010

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

kentastik · December 24, 2010

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

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

Great Rash · December 24, 2010

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

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

kentastik · December 24, 2010

Ну вы, блин, даёте...
http://www.jsfiddle.net/m82hk/

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

psywalker · December 24, 2010

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

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

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

Aurica · December 24, 2010

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

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

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

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

kentastik · December 24, 2010

Так в чем проблема? Нужно это?
.banner_class{
  ...
  margin:5px;
  ...
}
Опять-таки с размерами поиграться, чтобы они были как у вас, я подгонять не стала.

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

Great Rash · December 24, 2010

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

kentastik · December 24, 2010

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

Aurica · December 24, 2010

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

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

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

Sign In

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

Question

Link to comment

Share on other sites

24 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information