如何使用CSS将我的div放置在表格中？ [英] How to center my a div in a table using CSS?
问题描述
我正在尝试向我的某个网站添加幻灯片。整个页面都放在一个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;
$ b $ p
$ b这里是我的JQuery函数来改变图像：
函数slideSwitch（）{
var $ active = $（'＃slideshow IMG.active'）;
if（$ active.length == 0）$ active = $（'＃slideshow IMG：last'）;
//使用它来按照它们在标记
var $ next = $ active.next（）中显示的顺序拉动图像。 $ 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'）;
}）;
$ b $（function（）{
setInterval（slideSwitch（），5000）;
}）;
最后这里是表格中的幻灯片div：
< td bgcolor =redalign =centervalign =top>
< div id =slideshow>
< img src =2009Slideshow\1.jpgalt =幻灯片图片1class =active/>
< img src =2009Slideshow\2.jpgalt =幻灯片图片2/>
< img src =2009Slideshow\3.jpgalt =幻灯片图片3/>
等...
等...
< / div>
< / td>
那么为什么我无法将幻灯片放在该列的中心？
$通过使用css属性text-align：center;，内联元素可以很容易地居中对齐。通过使用margin-left：auto; margin-right：auto;来使块元素在中心对齐并给他们一个固定的宽度。在你的具体情况下，我会建议使用跨度而不是div或完全摆脱div，并使用文本对齐方法。
更新
< xml version =1.0encoding =UTF-8？>
<！DOCTYPE html PUBLIC - // W3C // DTD XHTML 1.1 // ENhttp://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd\">
< head>
< meta http-equiv =Content-Typecontent =text / html; charset = UTF-8/>
< title>居中< / title>
< style type =text / css>
表格{
border：1px纯黑色;
}
span {
background-color：red;
颜色：白色;
}
td {
text-align：center;
width：200px;
}
< / style>
< / head>
< body>
< div class =itemid =item1>
< table>
< tr>
< td>
< span>您好！< / span>
< / td>
< / tr>
< / table>
< / div>
< / body>
< / html>
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:
#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:
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:
<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>
So why can't I get my slideshow to center inside of that column?
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.
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>
这篇关于如何使用CSS将我的div放置在表格中？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
