jQuery幻灯片放映不居中

我有一个幻灯片放映，我创建了HTML/asp.net，jQuery和CSS。我有一切工作得很好，但我想将它集中在我的网页上。无论我做什么，我都会得到一个奇怪的结果。jQuery幻灯片放映不居中

任何时候我尝试做margin-left: auto和margin-right: auto什么也没有发生。它停留在页面的左侧。当我尝试做text-align: center时，我也没有看到任何改变。

下面是我的代码：

HTML/asp.net：

<%@ Page Title="Home Page" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true" 
CodeBehind="Default.aspx.cs" Inherits="mypage._Default" %> 

<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent"> 
<link href="/Styles/Home.css" rel="stylesheet" type="text/css" /> 
</asp:Content> 
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent"> 

<div id="slideshow"> 
<img src="Images/me.jpg" alt="" class="active" height="500" width="700"/> 
<img src="Images/WaterfallPic.JPG" alt="" height="500" width="700"/> 
</div> 
<script type="text/javascript" src="Scripts/jquery-1.4.1.js"></script> 
<script type="text/javascript" src="Scripts/HomeSlideshow.js"> 
slideSwitch(); 
</script> 
</asp:Content>

的JavaScript：

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); 
});

CSS：

#slideshow { 
position:relative; 
height:350px; 
width: 350px; 
text-align: center; 

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

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

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

来源

2014-01-09 frank billy

在CSS，＃幻灯片放映相对。在这种情况下，它相对于左上角。利润率不会影响它。

要么拿出相对定位或添加“的位置是：静态”的div元素的CSS

<div id="slideshow" style='position:static'>

来源

2014-01-09 02:53:47

当我做到这一点，它的动作进一步向上进入左上角，甚至重叠母版页。 –

现在将边距加回 –

也奇怪的是，如果我将它保留为'position：relative'并将我的边距设置为auto，它会移动到网页的右侧（大约填充200px）。所以它的偏心在右边...... –

jQuery幻灯片放映不居中

回答

相关问题