Question

我有一个幻灯片，我是用HTML / asp.net，jQuery和CSS创建的。我的一切工作都非常好，但我想把它放在我的网页上。无论我做什么，我都会得到一个奇怪的结果。

我随时尝试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;
}

Answer 1

在css中，＃slideshow位于相对位置。在这种情况下，它相对于左上角。保证金不会影响它。

取出相对定位或添加＆＃34; position：static＆＃34;到div元素的css

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

jQuery幻灯片放映不居中

1 个答案: