5

我正在尝试向我的一个网站添加幻灯片。整个页面布局在一个 HTML 表格中（我非常讨厌它并且没有选择）。我想把我的幻灯片放在那个特殊的专栏里。这是我的 CSS 的样子：

#slideshow {
position:relative;
}

#slideshow IMG {
position:absolute;
z-index:8;
opacity:0.0;
}

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

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

这是我用于更改图像的 JQuery 函数：

function slideSwitch() {
var $active = $('#slideshow IMG.active');

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

// use this to pull the images in the order they appear in the markup
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 );
});

最后是表格内的幻灯片 div：

<td bgcolor="red" align="center" valign="top"> 
<div id="slideshow">
    <img src="2009Slideshow\1.jpg" alt="Slideshow Image 1" class="active" />
    <img src="2009Slideshow\2.jpg" alt="Slideshow Image 2" />
    <img src="2009Slideshow\3.jpg" alt="Slideshow Image 3" />
    etc...
    etc...
</div>                    
</td>

那么为什么我不能让我的幻灯片显示在该列的中心？

4

6 回答 6

16

使用 css 属性“text-align:center;”可以轻松地将内联元素居中。块元素应使用“margin-left:auto;margin-right:auto;”在中心对齐 并给它们一个固定的宽度。在您的特定情况下，我建议使用跨度而不是“div”或完全摆脱 div 并使用 text-align 方法。

更新

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">   
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">     
    <head>      
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />   
        <title>Centering</title>
    <style type="text/css">
      table{
       border:1px solid black; 
      }
      span{
        background-color:red; 
        color:white;       
      } 
      td{
        text-align:center;
        width:200px; 
      }
    </style>
  </head>
  <body>
    <div class="item" id="item1">
      <table>
        <tr>
          <td>
            <span>Hi there!</span>  
          </td>
        </tr>        
      </table>
    </div>    
    </body>
</html>
于 2009-06-25T04:42:29.247 回答
5 
#slideshow {
margin: 0 auto;
}

and also text-align: center

桌子

于 2009-06-25T05:21:04.590 回答
1

即使您不知道图像的大小，以下解决方案也有效：

<div style=" height:100px; width:100px; display:table-cell; text-align:center; vertical-align:middle; " >
    <img src="images/myPicture.png">
</div>

于 2009-08-11T22:13:10.243 回答
0

我会在上面添加评论，但没有 50 个代表 .. doh。我似乎记得，如果您在 IE6 中的 doctype 前面有任何内容，它会将其发送到 quirks 模式。这可能会导致问题

<?xml version='1.0' encoding='UTF-8'?>

可能值得一试。

于 2009-06-25T07:53:45.020 回答
0

如果可以删除绝对定位，请在 td 上使用 text-align:center。

如果您无法删除绝对定位并且所有图像大小相同，请将 left 设置为 td/2 - img_width/2。所以如果你在 200px 宽的 td 中有一个 80px 宽的图像，你会使用

#slideshow img {position:absolute; left:60px; opacity:0; z-index:8;}

如果您无法删除绝对定位并且图像大小不同，则必须在 javascript 中计算 left 值。

IE 不支持不透明度。它filter: alpha(opacity = 50);改为使用。

于 2009-06-25T10:56:28.303 回答
0

标准

 div#slideshow {
    margin : 0 auto;
    width : 200px;
}

和（旧？）即

td {
    text-align : center;
}

即不“喜欢”自动边距，但不仅将内联元素居中，而且将块元素（div）居中

也不知道 td on ie 的 display 属性的标准值是什么，因为它不使用 table-cell 并且 text-align 不能在内联元素中工作，所以另一种可能的方法是将它包裹在另一个 div 周围：

<td>
<div id="slideshow_container">
<div id="slideshow">
...
</div>
</div>
</td>

和CSS

div#slideshow {
    margin : 0 auto;
    width : 200px;
}
div#slideshow_container {
    text-align : center;
    width : 100%;
    height : 100%;
}
于 2009-06-25T11:04:32.403 回答