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幻燈片放映不居中

回答

相關問題