怎么让table在div正中间显示

Mr-puss 2013-12-28 07:56:13

...全文

1464 13 打赏收藏转发到动态举报

写回复

用AI写文章

13 条回复

切换为时间正序

请发表友善的回复…

发表回复

零七九三 2014-01-03

打赏
举报

引用 10 楼 u011128789 的回复:

[quote=引用 4 楼 leeyea2008 的回复:] 按你的意思，div的高度是不固定的（因为table的列无限增加），那么div加上padding-top和padding-bottom就可以解决，然后table加上margin:0 auto; 如果div的高度固定，而且table随着列的增加也不会超过div的高度，那么可以用js判断：在js插入table后，判断父容器（div）的高及table的高，公式：（div的高-table的高）/2=table的margin-top的值或绝对定位top的值

div的高度我直接固定的但是随机生成的table的高度我要如何获取？[/quote] 抱歉，这两天没关注你的问题，谢谢你给了分！ jquery获取元素的高度很方便，你查看jquery手册便知！如果没能解决，请联系我！

allali 2013-12-30

打赏
举报


<div style="width:500px;height:500px;border:1px solid;">
        <div style="width:400px;height:400px;margin:50px;background: silver;overflow: auto">
            <table>
                .....
            </table>
        </div>
    </div>

Genie77998 2013-12-30

打赏
举报

你创建table的时候带上一个样式然后定义一下样式居中不就行了？

零七九三 2013-12-30

打赏
举报

按你的意思，div的高度是不固定的（因为table的列无限增加），那么div加上padding-top和padding-bottom就可以解决，然后table加上margin:0 auto; 如果div的高度固定，而且table随着列的增加也不会超过div的高度，那么可以用js判断：在js插入table后，判断父容器（div）的高及table的高，公式：（div的高-table的高）/2=table的margin-top的值或绝对定位top的值

zhjdg 2013-12-30

打赏
举报

我那高度是随机的。

KK3K2005 2013-12-30

打赏
举报

那你就一定要用div 不能换成table吗？ table里面的东西不是直接可以居中

Mr-puss 2013-12-30

打赏
举报

引用 4 楼 leeyea2008 的回复:

按你的意思，div的高度是不固定的（因为table的列无限增加），那么div加上padding-top和padding-bottom就可以解决，然后table加上margin:0 auto; 如果div的高度固定，而且table随着列的增加也不会超过div的高度，那么可以用js判断：在js插入table后，判断父容器（div）的高及table的高，公式：（div的高-table的高）/2=table的margin-top的值或绝对定位top的值

div的高度我直接固定的但是随机生成的table的高度我要如何获取？

克力 2013-12-30

打赏
举报

margin:0 auto;加padding-right那些

别闹腰不好 2013-12-30

打赏
举报

设置div的文本对齐方式为居中，顶端对齐方式也是居中。 text-align:center vertical-align:middle

似梦飞花 2013-12-30

打赏
举报

创建完表格后获得表格的计算样式后用定位试试

zhjdg 2013-12-28

打赏
举报

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="../lib/jquery/jquery-1.9.1.js"></script>
<style>
#container {
	width:550px;
	height:500px;
	border:1px solid #321;
}



</style>
</head>
<body>
<div id='container'>
	<table width="400" border="1" id="buzhidao" >
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
    <td>4</td>
    <td>5</td>
    <td>6</td>
    <td>7</td>
    <td>8</td>
  </tr>
  <tr>
    <td>a1</td>
    <td>a2</td>
    <td>a3</td>
    <td>a4</td>
    <td>a5</td>
    <td>a6</td>
    <td>a7</td>
    <td>a8</td>
  </tr>
  <tr>
    <td>b1</td>
    <td>b2</td>
    <td>b3</td>
    <td>b4</td>
    <td>b5</td>
    <td>b6</td>
    <td>b7</td>
    <td>b8</td>
  </tr>
  </table>

</div>

<script>
var $c = $("#container");
var $ch = $c.height();
var $cw = $c.width();

var $b = $("#buzhidao");
var $bh = $b.height();
var $bw = $b.width();

$c.css({position:'relative'});
$b.css({
	position:'absolute',
	left:($cw/2-$bw/2)+'px',
	top:($ch/2-$bh/2)+'px'
});


</script>
</body>
</html>

Go 旅城通票 2013-12-28

打赏
举报

<div style="width:500px;height:500px;border:solid 1px #000;vertical-align:middle"><table border="1" align="center"><tr><td>1</td></tr></table></div>
<script>
var table=document.getElementsByTagName('table')[0];
table.style.marginTop=(500-table.offsetHeight)/2+'px'
</script>

Go 旅城通票 2013-12-28