отцентрировать флоатные картинки в блоке
Имеется div или например ячейка таблицы. Заданной ширины или 100%(пока не знаю).
В этом диве есть переменное число картинок float:left. Как их выровнять по центру(по горизонтали)? Спасибо. |
Цитата:
Но современные браузеры понимают display: inline-block; Это поможет тебе вместо float:left; |
у меня просто в требованиях к галлерее - чтобы если шла большая картинка, а за ней маленькие - то они могли справа от нее по ее высоте выстроиться в 2 ряда например. Такое флоат только позволяет.
Какое то странноватое решение нашел - оно центрует только для одного ряда |
|
<pre>
Имеется div или например ячейка таблицы.
Заданной ширины или 100%(пока не знаю).
В этом диве есть переменное число картинок float:left.
Как их выровнять по центру(по горизонтали)?
Спасибо.
</pre>
<style>
*{margin:0;padding:0;}
pre{text-align:center}
#cont{outline:1px solid #000;/*any*/width:100%;}
#d1,#d2{width:80px;float:left;padding:0 10px}
#d1{background:#ccc;}
#d2{background:#eee;}
.clear{clear:both;}
#help{width:200px;margin:0 auto;}
</style>
<script>
//Причем тут JS непонятно совершенно;
</script>
<div id="cont">
<div id="help">
<div id="d1"> </div>
<div id="d2"> </div>
<div class="clear"></div>
</div>
</div>
|
chippolino, у меня нет данных сколько картинок поместятся в ряду, об этой ширине(width:200px у тебя) и после какой очистку делать.
|
<div>
<span> <div class="div2"> <img/> <img/> <img/> </div> </span> </div> div{ text-align:center; background:#900; } div .div2{ display:table; width:auto; margin:0 auto } div img{ border:2px solid #0f0; float:left; text-align:center; position:relative; } попробуй, я так меню с флоатом центировал. display:inline-block не все понимают. |
<html>
<head>
<title>Untitled</title>
<style type="text/css">
<!--
div{
text-align:center;
background:#900;
}
div .div2{
display:table;
width:auto;
margin:0 auto
}
div img{
border:2px solid #0f0;
float:left;
text-align:center;
position:relative;
}
-->
</style>
</head>
<body>
<div>
<span>
<div class="div2">
<img/>
<img/>
<img/>
</div>
</span>
</div>
</body>
</html>
пашет |
| Часовой пояс GMT +3, время: 10:00. |