Форум

micscr · #1 (**permalink**) 05.09.2011, 10:40

Имеется div или например ячейка таблицы. Заданной ширины или 100%(пока не знаю).
В этом диве есть переменное число картинок float:left. Как их выровнять по центру(по горизонтали)?
Спасибо.

ksa · #2 (**permalink**) 05.09.2011, 11:47

Сообщение от micscr

Как их выровнять по центру(по горизонтали)?

ЦССно - никак.

Но современные браузеры понимают

display: inline-block;

Это поможет тебе вместо

float:left;

micscr · #3 (**permalink**) 05.09.2011, 11:58

у меня просто в требованиях к галлерее - чтобы если шла большая картинка, а за ней маленькие - то они могли справа от нее по ее высоте выстроиться в 2 ряда например. Такое флоат только позволяет.

Какое то странноватое решение нашел - оно центрует только для одного ряда

micscr · #4 (**permalink**) 05.09.2011, 12:02

что имеем пока

chippolino · #5 (**permalink**) 05.09.2011, 12:05

<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">&nbsp;</div>
		<div id="d2">&nbsp;</div>
		<div class="clear"></div>
	</div>
</div>

micscr · #6 (**permalink**) 05.09.2011, 12:15

chippolino, у меня нет данных сколько картинок поместятся в ряду, об этой ширине(width:200px у тебя) и после какой очистку делать.

qwertyuiop10 · #7 (**permalink**) 03.10.2011, 00:04

<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 не все понимают.

qwertyuiop10 · #8 (**permalink**) 03.10.2011, 00:15

<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>

пашет

Форум

Справочник

Discord чат

Курсы javascript