Возможно ли в данном случае выравнивание по центру?

Asar
На сайте с 23.08.2004
Offline
334
1992

Нечто вроде галереи превьюх. Строим ряд элементов с float:left. Ширина элементов заранее известна. Количество в ряд не регламентирутеся — сколько влезет, столько и будет.

Вопрос: можно ли как-либо все это счастье выравнять по центру экрана, не занимаясь подсчетом его ширины?

RO
На сайте с 13.07.2009
Offline
88
#1

все это дело кинуть в div и выровнять, или я не совсем понял...

Asar
На сайте с 23.08.2004
Offline
334
#2

Поняли правильно, но с ДИВом будет работать, только если элемены не_блочные. Кроме того, этот вариант не_будет работать, даже если не делать ссылки, например, блочными, но сделать их с флоатом.

AlikZP
На сайте с 22.11.2009
Offline
107
#3

Похожую задачу решал с блоком меню в <ul>. Который должен быть по центру расположен.

Сейчас найду пример, кину

HTML

<div class="menu_ctl">

<ul class="menu">
<li><a href="#">Главная</a></li>
<li><a href="#">Наш автопарк</a></li>
<li><a href="#">Стоимость</a></li>
<li><a href="#">Наши вакансии</a></li>
<li><a href="#">Сделать заказ</a></li>
<li><a href="#">Контакты</a></li>
</ul>
</div>

CSS

.menu_ctl{

position: relative;
right: 50%;
float: right;
}
ul.menu{
position: relative;
right: -50%;
}

Родительский контейнер

position:relative

То есть получается, что ширина ul неизвестна, но он должен быть строго по центру. Работает...

Website CMS: быстрая, удобная, недорогая! Вечная лицензия за 45$ (/ru/forum/524503) Яся - быстрый поиск фото для товаров. OpenCart/ocStore. Дополнение. (/ru/forum/665287) Грамотная верстка ваших макетов (/ru/forum/comment/8853216)
Asar
На сайте с 23.08.2004
Offline
334
#4

AlikZP, спасибо за коммент, задачка со списками тоже интересная. Но в моем случае не поможет, т.к. выравнивается ряд...

AlExTeam
На сайте с 12.08.2010
Offline
34
#5

если сделать все елементы с левым флоатом и если они одинаковой ширины и высоты, то получится.

Только правое поле будет разное при разных размерах браузера.

Имхо лучше через таблицу это решить

Internet killed the video star
Asar
На сайте с 23.08.2004
Offline
334
#6

Да вот в том и дело, что при разном правом поле — это уже не центрирование... А через таблицу — не получится подгона под ширину браузера, т.к. количество столбцов должно быть заранее определено.

AlExTeam
На сайте с 12.08.2010
Offline
34
#7
Asar:
Да вот в том и дело, что при разном правом поле — это уже не центрирование... А через таблицу — не получится подгона под ширину браузера, т.к. количество столбцов должно быть заранее определено.

Если ширина элементов одинаковая, то можно выбрать приемлемое число колонок.

Иначе никак.

Когда-то маялся с такой же проблемой. В итоге решил не обращать внимания на правое поле. :)

firefox19
На сайте с 05.11.2009
Offline
34
#8

margin: 0 auto; для img может помочь. Но без html-примера сложно угадать.

Ваши идеи - наша работа (http://yaweb.ru) Продам Сайт агентства недвижимости (/ru/forum/561489)
Asar
На сайте с 23.08.2004
Offline
334
#9
firefox19:
margin: 0 auto; для img может помочь. Но без html-примера сложно угадать.

Сейчас сделано вот так:

<a href="/catalogue/1" class="pre"><span class="pr">Таракан</span><img src="/img/1000/1.jpg" class="pre"></a>

a.pre {position:relative; float:left; height:286px; margin:6px; text-decoration:none; font-size:12px;}
span.pr {position:absolute; right:15px; top:10px;}

Если просто img, вообще никаких проблем нет с центрированием, просто в блок запихнуть нужно. А вот когда надписи поверх — эт уже интереснее.

Asar добавил 20.09.2010 в 22:41

AlExTeam:
Если ширина элементов одинаковая, то можно выбрать приемлемое число колонок.
Иначе никак.
Когда-то маялся с такой же проблемой. В итоге решил не обращать внимания на правое поле. :)

Да если таблицей делать, вообще никаких проблем, хоть одинаковые поля, хоть нет. А вот с расползающимися блоками — эт да, это интересно.

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий