如何使用 CSS 使我的 div 在表格中居中？答案

【问题标题】：How to center my a div in a table using CSS?如何使用 CSS 使我的 div 在表格中居中？
【发布时间】：2010-11-05 17:54:34
【问题描述】：

我正在尝试向我的一个网站添加幻灯片。整个页面布局在一个 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>

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

【问题讨论】：

标签： jquery html css slideshow

【解决方案1】：

使用 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>

【讨论】：

关于居中的好技巧，但我反对使用跨度来支持 div。在这种情况下，跨度将不是内容的语义表示。在我看来，一个 div 会更合适。
@merkuro: margin-left: auto;边距右：自动；似乎在 IE 中不起作用？（我也非常讨厌 IE）
@merkuro：好建议 +1，但它仍然没有解决我的问题。
@John Kugelman 虽然它们可以以非常相似的方式使用，但我认为应该在这里使用本质上的内联元素，我认为没有理由将其定义为一个完整的单独段落（即在我看来是一个 div）。
@merkuro：你相信 DOCTYPE 解决了整个问题吗？谢谢！

【解决方案2】：

#slideshow {
margin: 0 auto;
}

and also text-align: center

餐桌

【讨论】：

您还需要将 div 的宽度设置为 TD 的 100%。

【解决方案3】：

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

【讨论】：

【解决方案4】：

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

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

可能值得一试。

【讨论】：

【解决方案5】：

如果可以去掉绝对定位，在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);。

【讨论】：

【解决方案6】：

标准

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

and for (old ?) ie

td {
    text-align : center;
}

ie 不“喜欢”自动边距但中心不仅是内联元素，还有块元素（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%;
}

【讨论】：