如何将幻灯片的shpw图像对齐到div标签的中心
[英]how to align slide shpw images to center inside div tag
问题描述
I wanted a slide show in my web page, for this I used this code: 
我希望在网页中进行幻灯片放映，为此，我使用了以下代码：
<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>
It is coming left of my screen. 它在我的屏幕左边。 But I wanted it to come in center of my webpage. 但是我希望它能出现在我网页的中心。
Can anyone please tell me how to do it? 谁能告诉我该怎么做？
Thanks, Regards, Sabyasachi 谢谢，问候，Sabyasachi
4 个解决方案
解决方案1
0 2012-06-11 05:35:21
It should be align="center" , but even that's incorrect. 它应该是align="center" ，但是那是不正确的。 You should be using CSS for that sort of thign, not deprecated tag attributes: 您应该使用CSS来实现这种流行而不是不推荐使用的标记属性：
#slideshow {
text-align: center;
margin: 0 auto;
}
解决方案2
0 2012-06-11 05:35:27
The align attribute of <div> is deprecated. <div>的align属性已弃用。
Consider using <div style="text-align:center"> , or failing that, use a <center> tag around the <div> tag. 考虑使用<div style="text-align:center"> ，否则，请在<div>标记周围使用<center> <div>标记。
Notwithstanding, the correct align attribute would be "center" not "middle" . 尽管如此，正确的align属性应该是"center"而不是"middle" 。
解决方案3
0 2012-06-11 05:37:24
The slideshow doesen't seem to work for me, but for simple center alignment, you'll need a width on your slideshow and then just margin: 0 auto; 幻灯片似乎不适用于我，但为了简单地进行中心对齐，您需要在幻灯片上设置一个宽度，然后才需要边距：0自动； - auto on left and right are what does the trick here. -左右两边自动是这里的诀窍。
Like so: 像这样：
#slideshow {
position:relative;
height:350px;
width:350px;
margin:0 auto;
}
you can ditch the align="middle" in the html. 您可以在html中放弃align =“ middle”。
解决方案4
0 2012-06-11 05:40:56
made some changes in #slideshow and #slideshow IMG 在#slideshow和#slideshow IMG中进行了一些更改
and i think don't use align in a div, vs shows a warning align attribute is outdated 而且我认为不要在div中使用align ，vs显示警告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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.