Float:left, но по центру. @ DeForum.ru

Есть куча маленьких блоков с фиксированной шириной и высотой, причем количество их заранее неизвестно.

У каждого - float:left. Браузер растягиваешь - их становится больше на строке, сжимаешь - меньше.

Но они, гады, СЛЕВА!!!

А как бы их по центру замонстрячить?

и так, и сяк пытался - ни фига не выходит.

(умникам: тупо таблицу не предлагать, количество элементов в строке зависит от ширины окна)

Бaзиль, наверное, туплю, но родительскому диву, в котором они там все находятся, нельзя задать text-align:center?

tentoys, пробовал, не помогает

в прынцыпе, можно сделать display:inline, но это проблему не решает - там содержимое - заголовок, картинка, подпись. БЛИН.

Бaзиль, пример страницы с кодом можно?
Кстати, странно, что text-align не работает:

Цитата:

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

Может попробовать применить, но убрать float

tentoys, text-align: center блочные элементы выравнивать не будет. этим можно выравнивать лишь строчные элементы внутри блока.

Бaзиль, сам долго мучался с подобной проблемой. без определения ширины выровнять блочный элемент на странице не представляется возможным.

как ни крути, а надо либо ширину, либо таблицу. несовершенна блочная модель. был-бы какой-нибудь float: center... :cry:

hardy писал(а):

Бaзиль, сам долго мучался с подобной проблемой. без определения ширины выровнять блочный элемент на странице не представляется возможным.

Тут есть варианты:
1. Считать размер родительского блока с помощью Javascript, а потом его центрировать.
2. Если я верно понял задачу, то возможно вот такой вариант: http://xhtml.ru/forum/viewtopic.php?id=482 (смотрите 2 сообщение)

vashurin,
круто! спасибо

Да, вот оно!!! Но только в IE обрабатывается так, как надо. Как бы это сделать еще и в остальных браузерах?
Жабаскрипт оч не хоцца(

Бaзиль,
ты о чем? джаваскрипт как раз для ИЕ. а в нормальных браузерах "display: table; margin: 0 auto;"

Ну, что-нибудь типа такого можно попробовать:

(кстати, туплю, а просто тег align, каков его статус?)

Код:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Style-Type" content="text/css">
<title>test</title>
<style title="Default" media="screen" type="text/css">
body {margin:50px 0px; padding:0px;text-align:center;}
#wrapper {
   width: 90%;
   margin:0px auto;
   text-align: center;
   padding:4%;
   border:1px solid black;
   background-color:#eee;
   overflow: visible;
   display: table-cell;
   }
</style>
</head>
<body>
<div id="wrapper">
<div style="width:100px; height:100px; background-color:red; float:left;">.</div>
<div style="width:100px; height:100px; background-color:orange; float:left;">.</div>
<div style="width:100px; height:100px; background-color:yellow; float:left;">.</div>
<div style="width:100px; height:100px; background-color:green; float:left;">.</div>
<div style="width:100px; height:100px; background-color:blue; float:left;">.</div>
<div style="width:100px; height:100px; background-color:navy; float:left;">.</div>
<div style="width:100px; height:100px; background-color:magenta; float:left;">.</div>
<div style="width:100px; height:100px; background-color:cyan; float:left;">.</div>
</div>
</body>
</html>

tentoys,

Такой код не работает ни в одном браузере. И как это должно центрироваться, если задана ширина? :confused:

если убрать ширину и table-cell поменять на table, то в Мозилле/опере будет центрироваться, но это нам уже vashurin подсказал.

А text-align: center тут вообще мимо кассы.…

А тэга align нету.
Есть атрибут align="", применяемый к элементам в html, например к таблицам: http://web.php.net.ua/manual/html401/tables.html#h-11.2

Сейчас же стараются отделить оформление от содержания, поэтому align, который пишется в html, а не в css не канает :dandy:

tentoys писал(а):

(кстати, туплю, а просто тег align, каков его статус?)

deprecated.

hardy, я как идею предположил. Не понял, насчёт заданной ширины -- да, задана, это ж явно написано в сообщение от Бaзиль
Вот ещё вариант. Я немного поискал, на коленке (извиняюсь) слепил, но, вроде, в ИЕ работает. Без float. Ну, умные (в отличие от меня) и одарённые доработают рашпилем под Мозиллу/ФФ.
Кстати, по-моему, один в один поднятая проблема:

Цитата:

I want to have a number of small divs (lets say they have equal width eg 100px) stacked next to each other but overall centred in a liquid center reqion.

I can stack them by using float left, but what I want is for the overall stack to be centered in the centercontentdiv. And to make the solution general so that the small divs can contain images, headings lists and paras.
I can do all this if I accept that the result will be a block of divs aligned to the left. But it would be so nice to get symmetry by making them overall centered, without having to fix the width of the center area. That
is as the area squidges, less small divs per line and as it widens, more divs per line, but still nicely centered.

МОжет, действительно, покопать в сторону списков, как предлагается в развитие цитаты выше тут

tentoys, то что надо (там, где радуга). Правда в опере неправильно работает.

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

решается просто - им делается position:relative и вставляются блоки с position:absolute. В ИЕ и в ФФ работает, в опере - нет. Не умеет она, зараза, считать позицию для инлайновых блоков

4 Сообщения: 143 Зарегистрирован: 20.06.06

style.css

Код:

ul {
   padding: 0px;
   margin: 0px;
   text-align: center;
}
li {
   display: inline;
   width: 120px;
}

index.html

Код:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru" lang="ru">

<head>
   <title>Untitled</title>
   <link rel="STYLESHEET" type="text/css" href="style.css" />
</head>

<body>


<ul>
   <li><img src="i.jpg" width="110" height="110" alt=""></li>
   <li><img src="i.jpg" width="110" height="110" alt=""></li>
   <li><img src="i.jpg" width="110" height="110" alt=""></li>
   <li><img src="i.jpg" width="110" height="110" alt=""></li>
</ul>



</body>
</html>

Кира, да, я предлагал. Но -- именно подумать, как это можно использовать. Ибо, если с картинкой прокатит, то с дивами вместо картинок -- нет.

4 Сообщения: 143 Зарегистрирован: 20.06.06

http://saltykova.name/proba/proba4.html

Кира, я уж было возрадовался, но увы… НеИЕ — флоата никакого нету, все в ряд…
За попытку — респект :beer:

(примерно к такому же результату и я пришел, только смастерил типатаблицу из 3-х «ячеек»: две боковых с %-ой шириной, центральная — контейнер для флоатов. Но это условное псевдоцентрирование, а дальше ковырять было недосуг…)

4 Сообщения: 143 Зарегистрирован: 20.06.06

http://saltykova.name/proba/proba4a.html
все. дальше сами додумывайте. или передвайте мне ваш заказ и гонорар

Кира писал(а):

или передвайте мне ваш заказ и гонорар

оффтопик:

ну вот, а помнится вы мне как-то пеняли за излишнюю меркантильность :laugh:

4 Сообщения: 143 Зарегистрирован: 20.06.06

karamba, а по теме топика?

оффтопик:

ваше неравнодушие ко мне настораживает. Почитайте учебники. Потренеруйтесь. У вас все получится. Не злитесь, это вам не к лицу.

оффтопик:

Кира,

Кира, вобщем, не получится, без Джавы

4 Сообщения: 143 Зарегистрирован: 20.06.06

у меня все получилось

Кира писал(а):

у меня все получилось

Что всё получилось? Можно код посмотреть? Из приведённого Вами выше -- увы, не получилось (для Опер, ФФоксом и, думаю, для Сафари тоже). Тот же успех, что и я приводил. Только без встроенных картинок и без float'а.

DeДверь
Логин:
Пароль:
	Автологин