jQuery 如何使用 CSS 将我的 div 居中放置在表格中？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1042209/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to center my a div in a table using CSS?
提问by Bob Dylan
I'm trying to add a slideshow to one of my websites. The whole page is layed out in an HTML table (which I hate with a passion AND did not choose). I want to center my slideshow inside that paticular column. Here is what my CSS looks like:
我正在尝试向我的网站之一添加幻灯片。整个页面都放在一个 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;
}
Here is my JQuery function to change images:
这是我用于更改图像的 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 );
});
And finally here is the slideshow div inside the table:
最后这里是表格内的幻灯片 div：
<td bgcolor="red" align="center" valign="top">
<div id="slideshow">
<img src="2009Slideshow.jpg" alt="Slideshow Image 1" class="active" />
<img src="2009Slideshow.jpg" alt="Slideshow Image 2" />
<img src="2009Slideshow.jpg" alt="Slideshow Image 3" />
etc...
etc...
</div>
</td>
So why can't I get my slideshow to center inside of that column?
那么为什么我不能让我的幻灯片显示在该列的中心？
回答by merkuro
Inline elements can be easily centered by using the css property "text-align:center;". Block elements should be align in the center by using "margin-left:auto;margin-right:auto;" and by giving them a fixed width. In your particular case I would suggest to use a span instead of a "div" or get rid of the div completely and use the text-align method.
使用 css 属性“text-align:center;”可以轻松地将内联元素居中。块元素应该使用“margin-left:auto;margin-right:auto;”在中心对齐 并给它们一个固定的宽度。在您的特定情况下，我建议使用跨度而不是“div”或完全摆脱 div 并使用 text-align 方法。
Update
更新
<?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>
回答by Rony
#slideshow {
margin: 0 auto;
}
and also text-align: center
for the table
为桌子
回答by Bob Dylan
The following solution works even when you dont know the size of the image:
即使您不知道图像的大小，以下解决方案也有效：
<div style="height:100px; width:100px; display:table-cell; text-align:center; vertical-align:middle;" >
<img src="images/myPicture.png">
</div>
<div style=" height:100px; width:100px; display:table-cell; text-align:center; vertical-align:middle;" >
<img src="images/myPicture.png">
</div>
回答by Nooshu
I would add a comment above but don't have 50 rep.. doh. I seem to remember that if you have anything in front of the doctype in IE6, it sends it into quirks mode. That may be causing problems
我会在上面添加评论，但没有 50 代表……哦。我似乎记得，如果您在 IE6 中的 doctype 前面有任何内容，它会将其发送到 quirks 模式。这可能会导致问题
<?xml version='1.0' encoding='UTF-8'?>
May be worth a shot removing this.
可能值得一试。
回答by Emily
If you can remove the absolute positioning, use text-align:center on the td.
如果您可以删除绝对定位，请在 td 上使用 text-align:center。
If you cannot remove the absolute positioning and all your images are the same size, set left to td/2 - img_width/2. So if you had a 80px wide image in a 200px wide td, you would use
如果您无法删除绝对定位并且所有图像的大小相同，请将 left 设置为 td/2 - img_width/2。因此，如果您在 200 像素宽的 td 中有一个 80 像素宽的图像，您将使用
#slideshow img {position:absolute; left:60px; opacity:0; z-index:8;}
If you cannot remove the absolute positioning and you images are different sizes, you will have to calculate the left value in your javascript.
如果您无法删除绝对定位并且图像大小不同，则必须在 javascript 中计算左值。
IE does not support opacity. It uses filter: alpha(opacity = 50);instead.
IE 不支持不透明度。它使用filter: alpha(opacity = 50);代替。
回答by Emily
standard
标准
div#slideshow {
margin : 0 auto;
width : 200px;
}
and for (old ?) ie
对于（旧的？）即
td {
text-align : center;
}
ie doesn't "like" auto margins but centers not only inline elements but block elements (divs)
即不“喜欢”自动边距，但不仅使行内元素居中，而且使块元素（div）居中
also not shure what is standard value of display property for td on ie because it doesn't use table-cell and text-align will not work inside inline elements so another possible aproach would be to wrap it around another div :
也不知道什么是 td on 显示属性的标准值，即因为它不使用 table-cell 并且 text-align 在内联元素内不起作用，所以另一种可能的方法是将它包裹在另一个 div 周围：
<td>
<div id="slideshow_container">
<div id="slideshow">
...
</div>
</div>
</td>
and css
和CSS
div#slideshow {
margin : 0 auto;
width : 200px;
}
div#slideshow_container {
text-align : center;
width : 100%;
height : 100%;
}
