Верстка. Картинка по центру div

[morohon]

Здравствуйте, уважаемые гуру! Не могли бы вы подсказать, как выровнять картинку по центру div'а в коде, который будет представлен ниже. Я знаю, что код не совершенен, и если вам будет не трудно, укажите на ошибке и если можно с объяснениями, чтобы я мог исправить их в дальнейшем. Буду очень признателен за помощь.
css:

		body {			width:100%;			height:100%;		}		body div#rotator{		    float:left;		    min-width: 60%;		    max-width: 65%;		   	min-height: 70%;		    max-height: 80%;		}		#rotator li img {			min-width: 85%;			max-width: 100%;			min-height: 75%;			max-height: 80%;		}		#rotator div > ul.list{		    position: relative; 		    list-style: none;		    padding: 0px;		    min-width: inherit;		    max-width: inherit;		    min-height: inherit;		    max-height: inherit;		}		#rotator ul.list > li {		    position: absolute;		    margin: 0 auto; 		    list-style: none;		    min-width: inherit;		    max-width: inherit;		    min-height: inherit;		    max-height: inherit;		}		#rotator ul.list > li.show {		    z-index:500;		    min-width: inherit;		    max-width: inherit;		    min-height: inherit;		    max-height: inherit;		}

код html:

		<div id="rotator">		  <ul class="list">		    <li class="show"><img src="<?php echo $path.'/1'.$type; ?>"/></li>		    <?php		    for ($i=2;$i<=$count;$i++){?>		    	<li><img src="<?php echo $path.'/'.$i.$type; ?>"/></li>		    <?php }		    ?>		  </ul>		</div>

Если нужно, данный код располагается здесь. Заранее размер картинки неизвестен. Нужно чтобы и вертикальные и горизонтальные картинки были одинаково расположены по центру. Пожалуйста, помогите!

 

[morohon]

Вверх

[Max22]

#rotator li img {text-align:center;}

Попробуй так.

[Zverushka]

Еще можно display: block, margin: 0 auto;

[morohon]

Еще можно display: block, margin: 0 auto;

 

#rotator li img {text-align:center;}

Попробуй так.

 

Ничего из этого увы, не помогло. Есть еще варианты? Может у меня в верстке где-то ошибка? Не подскажите?

[morohon]

Актуально!

[Zverushka]

Потому что li растягивается под размеры картинки и ей не в чем выравниваться.

В свою очередь li имеет positon absolute и выпадает из потока, поэтому родительский ul  не растягивается нормально под li.

С третьей стороны margin: 0 auto; не действует с позицией absolute.

[morohon]

Потому что li растягивается под размеры картинки и ей не в чем выравниваться.

В свою очередь li имеет positon absolute и выпадает из потока, поэтому родительский ul  не растягивается нормально под li.

С третьей стороны margin: 0 auto; не действует с позицией absolute.

Я понимаю, что прошу многого, но не могли бы вы помочь исправить этот косяк? Я не очень хорошо знаю css

[morohon]

Потому что li растягивается под размеры картинки и ей не в чем выравниваться.

В свою очередь li имеет positon absolute и выпадает из потока, поэтому родительский ul  не растягивается нормально под li.

С третьей стороны margin: 0 auto; не действует с позицией absolute.

В данный момент, код располагается здесь: http://www.morohon.pusku.com/panel2.ru/

[Struggle]

запилить картинку через div, задать выравнивание top center, не?

[morohon]

запилить картинку через div, задать выравнивание top center, не?

У меня ротатор картинок завязан на списке ul. Никак его не могу убрать

[Zverushka]

У вас непонятно в центре чего должна быть картинка - окна? или какой области? Сколько пикселей или процентов область, в которой выравнивать надо?

[ryter]

http://jsfiddle.net/ryter/rk36P/ что то подобное нужно ?

[morohon]

У вас непонятно в центре чего должна быть картинка - окна? или какой области? Сколько пикселей или процентов область, в которой выравнивать надо?

Див внутри которого список ul

размер картинки примерно ширина-70%  высота - 80%

Вот примерная схема:

http://jsfiddle.net/ryter/rk36P/ что то подобное нужно ?

 

Да, нечто похожее. Картинка должна быть по центру div вне зависимости от того, вертикальная она или горизонтальная. Я в самом начале думал двигать картинку просто (наивно думая, что она не выйдет за границы div), но оказывается в html картинки выходят за границы div.
Я очень слаб в css, поэтому и обратился сюда

[morohon]

http://jsfiddle.net/ryter/rk36P/ что то подобное нужно ?

Только вопрос такой, если на эту верстку прикрепить этот ротатор изображений:

 

<script type="text/javascript">	 	function theRotator() {		var time="<?php echo $time;?>";		// Устанавливаем прозрачность всех картинок в 0		$('div#rotator ul li').css({opacity: 0.0});	 		// Берем первую картинку и показываем ее (по пути включаем полную видимость)		$('div#rotator ul li:first').css({opacity: 1.0});	 		// Вызываем функцию rotate для запуска слайдшоу, 5000 = смена картинок происходит раз в 5 секунд		setInterval('rotate()',time);	}	 	function rotate() {			// Берем первую картинку		var current = ($('div#rotator ul li.show')?  $('div#rotator ul li.show') : $('div#rotator ul li:first'));	 		// Берем следующую картинку, когда дойдем до последней начинаем с начала		var next = ((current.next().length) ? ((current.next().hasClass('show')) ? $('div#rotator ul li:first') :current.next()) : $('div#rotator ul li:first'));		 		// Расскомментируйте, чтобы показвать картинки в случайном порядке		// var sibs = current.siblings();		// var rndNum = Math.floor(Math.random() * sibs.length );		// var next = $( sibs[ rndNum ] );	 		// Подключаем эффект растворения/затухания для показа картинок, css-класс show имеет больший z-index		next.css({opacity: 0.0})		.addClass('show')		.animate({opacity: 1.0}, 1000);	 		// Прячем текущую картинку		current.animate({opacity: 0.0}, 1000)		.removeClass('show');	};	 	$(document).ready(function() {				// Запускаем слайдшоу		theRotator();	});	 	</script>

я пробовал в css убирать position: absolute, и выходило, что картпинка начинает постоянно опускаться вниз. Одна картинка в нужном месте появилась, другая ниже ее ( как список)

[ryter]

div.rotator ul li {display: none}

div.rotator ul li.show {display: block}

position absolute убрать

[morohon]

div.rotator ul li {display: none}

div.rotator ul li.show {display: block}

position absolute убрать

Вам огромное спасибо! Пойду все соединю воедино. Если что не пойму - обращусь. Спасибо еще раз огромное. И не только вам, а еще и 

Zverushka

Очень помогли

[morohon]

div.rotator ul li {display: none}

div.rotator ul li.show {display: block}

position absolute убрать

Не подскажите, относительно чего задавать размеры картинки. Они по идее лежат в li, т.е. нужно ориентироваться на размеры li. Но размеры li явно не заданы, пытался задать, получил очень плохую штуку. Пытался задать для div#rotator ul li img размеры, получаются слишком большие (если берешь 100% он ориентируется не на область браузера и выдает размер больше высоты области просмотра страницы и выходит бегунок)

И еще маленький вопрос, если вы разбираетесь в js, подскажите, почему после переверстывания, у меня получилась небольшая заминка перед появлением первой картинки ( там идет просто белый экран на месте картинки (как будто у нее opacity 0).

код html:

 

<?php	$count=count(glob($path.'/*.jpg'));?><div id="rotator">    <ul>        <li class="snow"><img src="<?php echo $path.'/1.jpg'; ?>" alt="img-1" /></li>        <?php        	for ($i=2;$i<=$count;$i++){ ?>        		<li class="snow2"><img src="<?php echo $path.'/'.$i.'.jpg'; ?>" alt="img<?php echo '-'.$i;?>" /></li>			<?php 			} ?>	</ul></div><div id="right">	<div class="logo">		<img src="<?php echo 'config_images/'.$row['logo']; ?>" class="main">	</div>	<div class="clock">		<?php include "clock/index.html"; ?>	</div></div><div id="marquee">	<marquee direction="left" loop="-1" behavior="scroll" scrolldelay="1" scrollamount="10" class="marq">		<span class="text"><?php echo $row['marquee'];?></span>	</marquee></div>

код css:

		div#rotator{		    float:left;			text-align: center; 			margin: 0 auto;			height: 80%;			display: table;			width: 65%;		}		div#rotator ul{			margin: 0;			padding: 0;			list-style: none;			display: table-cell;			vertical-align: middle;		}		div#rotator ul li {			display: none;		}		div#rotator ul li.show {		    z-index:500;		    display: block;		 }		div#rotator ul li img {			vertical-align: top;		}		div#right {			position: absolute;			right: 0px;			width: 30%;			height: 80%;		}		div#right .logo {			width: 100%;			height: 40%;		}		div#right .logo img {			width: 70%;			height: auto;			margin: 0 auto;		}		div#right .clock{			width: 100%;			height: 30%;			margin: 20px auto;		}		#marquee .marq {		    position: absolute; 		    bottom: 0;		    left: 0;		    right: 0;		}		#marquee .text {			color: blue;			font-size:95px;		}

И код js:

 

		function theRotator() {			var time="<?php echo $time;?>";			$('div#rotator ul li').css({opacity: 0.0});			$('div#rotator ul li:first').css({opacity: 1.0});			setInterval('rotate()',time);		}		function rotate() {				var current = ($('div#rotator ul li.show')?  $('div#rotator ul li.show') : $('div#rotator ul li:first'));			var next = ((current.next().length) ? ((current.next().hasClass('show')) ? $('div#rotator ul li:first') :current.next()) : $('div#rotator ul li:first'));				next.css({opacity: 0.0})			.addClass('show')			.animate({opacity: 1.0}, 1000);			current.animate({opacity: 0.0}, 1000)			.removeClass('show');		};		$(document).ready(function() {					theRotator();		});

Надеюсь я вам еще не надоел

 

 

Ах да, код здесь: http://www.morohon.pusku.com/new_panel/

Edited November 8, 2013 by morohon

[morohon]

Все еще актуально ! 

[morohon]

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