2012-06-11 3 views
0

Я хотел слайд-шоу в моей веб-странице, для этого я использовал этот код:как выровнять слайд shpw изображения к центру внутри сНа тега

<html> 
<head> 
<style> 
#slideshow { 
    position:relative; 
    height:350px; 

} 

#slideshow IMG { 
    position:absolute; 
    top:0; 
    left:0; 
    z-index:8; 
} 

#slideshow IMG.active { 
    z-index:10; 
} 

#slideshow IMG.last-active { 
    z-index:9; 
} 
</style> 
<script> 
function slideSwitch() { 
    var $active = $('#slideshow IMG.active'); 

    if ($active.length == 0) $active = $('#slideshow IMG:last'); 

    var $next = $active.next().length ? $active.next() 
     : $('#slideshow IMG:first'); 

    $active.addClass('last-active'); 

    $next.css({opacity: 0.0}) 
     .addClass('active') 
     .animate({opacity: 1.0}, 1000, function() { 
      $active.removeClass('active last-active'); 
     }); 
} 

$(function() { 
    setInterval("slideSwitch()", 5000); 
}); 
</script> 
</head> 
<body> 
<div id="slideshow" align="middle"> 
    <img src="img/11.jpg" alt="" class="active" /> 
    <img src="img/12.jpg" alt="" /> 
    <img src="img/13.jpg.jpg" alt="" /> 
</div> 

</body> 
</html> 

Он грядет слева от моего экрана. Но я хотел, чтобы он попал в центр моей веб-страницы.

Может ли кто-нибудь рассказать мне, как это сделать?

Спасибо, С уважением, Sabyasachi

ответ

0

Это должно быть align="center", но даже это неверно. Вы должны использовать CSS для такого рода thign, а не устаревшие атрибуты тегов:

#slideshow { 
    text-align: center; 
    margin: 0 auto; 
} 
0

Атрибут <div>align осуждается.

Рассмотрите возможность использования <div style="text-align:center">, или в противном случае используйте тег <center> вокруг тега <div>.

Несмотря на это, правильный атрибут align будет "center" не "middle".

0

Слайд-шоу не работает для меня, но для простого выравнивания по центру вам понадобится ширина в вашем слайд-шоу, а затем только маржа: 0 auto; - Авто слева и справа - вот что делает трюк.

Как так:

#slideshow { 
position:relative; 
height:350px; 
width:350px; 
margin:0 auto; 
} 

вы можете угробить ALIGN = "средний" в HTML.

0


внесли некоторые изменения в #slideshow и #slideshow IMG
и я думаю, что не следует использовать выравнивать в DIV, против показывает атрибут предупреждения Align устарела

<html> 
<head> 
<style> 
#slideshow { 
    position:relative; 
    height:350px; 
    width:500px; 
    margin:auto; 
} 

#slideshow IMG { 
    position:absolute; 

    z-index:8; 
} 

#slideshow IMG.active { 
    z-index:10; 
} 

#slideshow IMG.last-active { 
    z-index:9; 
} 
</style> 
<script> 
function slideSwitch() { 
    var $active = $('#slideshow IMG.active'); 

    if ($active.length == 0) $active = $('#slideshow IMG:last'); 

    var $next = $active.next().length ? $active.next() 
     : $('#slideshow IMG:first'); 

    $active.addClass('last-active'); 

    $next.css({opacity: 0.0}) 
     .addClass('active') 
     .animate({opacity: 1.0}, 1000, function() { 
      $active.removeClass('active last-active'); 
     }); 
} 

$(function() { 
    setInterval("slideSwitch()", 5000); 
}); 
</script> 
</head> 
<body> 
<div id="slideshow"> 
    <img src="img/11.jpg" alt="" class="active" /> 
    <img src="img/12.jpg" alt="" /> 
    <img src="img/13.jpg.jpg" alt="" /> 
</div> 

</body> 
</html> 
Смежные вопросы