怎么实现水平方向中间对齐？

rosecshly0928 2012-03-14 05:48:58

我经常看到有人说margin-left和margin-right设置为auto就能水平方向中间对齐。
或者设置center里面的内容就能对齐。
能给我解释解释margin-left和margin-right设置为auto,align设置为center和center标签的水平方向对齐有什么不一样吗？
为什么我下面这个例子我用了这么多对齐方式它就是不水平方向中间对齐呢？

<div class="content" style="clear:both; min-height: 70%; margin:0 auto; padding:0px; position:absolute;top:90px;z-index:-1;">
<center>
<table style="margin:auto; width:50%;">
<form action="">
<tr>
<td>房间号:</td><td><input type="text" name="roomid"></input></td>
</tr>
<tr>
<td>空调:</td><td><select name="air-conditioner">
<option value="nornal">正常</option>
<option value="none">无</option>
<option value="broken">坏</option>
<option value="maintenance">维修中</option>
</select></td>
</tr>
<tr>
<td><input type="submit" value="创建房间"></input></td>
</tr>
</form>
</table>
</center>
</div>

...全文

265 19 打赏收藏转发到动态举报

写回复

用AI写文章

19 条回复

切换为时间正序

请发表友善的回复…

发表回复

小昭 2012-03-16

打赏
举报

[Quote=引用 16 楼 rosecshly0928 的回复:]
引用 13 楼 yueshangchuanqi 的回复:

因为你用了position:absolute 所以你只能使用left去实现水平居中了。

你是指position的left？
[/Quote]

嗯，我上面有回帖解释了哦。

rosecshly0928 2012-03-16

打赏
举报

[Quote=引用 13 楼 yueshangchuanqi 的回复:]

因为你用了position:absolute 所以你只能使用left去实现水平居中了。
[/Quote]
你是指position的left？

小昭 2012-03-16

打赏
举报

[Quote=引用 14 楼 rosecshly0928 的回复:]
引用 13 楼 yueshangchuanqi 的回复:

因为你用了position:absolute 所以你只能使用left去实现水平居中了。

left指什么？
[/Quote]

<div class="content" style="clear:both; min-height: 70%; margin:0 auto; padding:0px; position:absolute;top:90px;z-index:-1;">
就是这行代码啊，这里你设置绝对定位后只设了个top，是距离父元素顶部，你还要设置一下left，就是距离父元素左边有多少距离

父元素要用相对定位position:relave;

rosecshly0928 2012-03-16

打赏
举报

[Quote=引用 13 楼 yueshangchuanqi 的回复:]

因为你用了position:absolute 所以你只能使用left去实现水平居中了。
[/Quote]
left指什么？

小昭 2012-03-16

打赏
举报

[Quote=引用 18 楼 rosecshly0928 的回复:]
引用 17 楼 yueshangchuanqi 的回复:

引用 16 楼 rosecshly0928 的回复:
引用 13 楼 yueshangchuanqi 的回复:

因为你用了position:absolute 所以你只能使用left去实现水平居中了。

你是指position的left？

嗯，我上面有回帖解释了哦。

谢谢，我试过了，就是因为使用了absolu……
[/Quote]

呵呵，解决了就好。

rosecshly0928 2012-03-16

打赏
举报

[Quote=引用 17 楼 yueshangchuanqi 的回复:]

引用 16 楼 rosecshly0928 的回复:
引用 13 楼 yueshangchuanqi 的回复:

因为你用了position:absolute 所以你只能使用left去实现水平居中了。

你是指position的left？

嗯，我上面有回帖解释了哦。
[/Quote]
谢谢，我试过了，就是因为使用了absolute，去掉这个或者设置left就能对齐了。

coder 2012-03-15

打赏
举报

看看csdn论坛，本页面的源码。
body的
#bbscsdn_wrap {
background: white;
width: 960px;
margin: 0 auto;
}

༺ཌༀཉི浮华背后༃ༀད༻ 2012-03-15

打赏
举报

有时候，必须定义width, margin:0 auto;才会生效

床上等您 2012-03-15

打赏
举报

margin:0 auto; 就能居中了，当然，你本层宽度要小于上一层才能看到效果。

danqe 2012-03-15

打赏
举报

table中间对齐，不需要在外面加div，只要<table align="center">它就相对于容器中间对齐了。别的我没试过。反正都有办法对齐。
其他对齐各浏览器有差异，得分开测试。

小昭 2012-03-15

打赏
举报

因为你用了position:absolute 所以你只能使用left去实现水平居中了。

我爱小土豆 2012-03-15

打赏
举报

不设置width；margin 都没有作用的

木头是猫 2012-03-15

打赏
举报

因为你用了absolute

rosecshly0928 2012-03-14

打赏
举报

[Quote=引用楼主 rosecshly0928 的回复:]
我经常看到有人说margin-left和margin-right设置为auto就能水平方向中间对齐。
或者设置center里面的内容就能对齐。
能给我解释解释margin-left和margin-right设置为auto,align设置为center和center标签的水平方向对齐有什么不一样吗？
为什么我下面这个例子我用了这么多对齐方式它就是不水平方向中间对齐呢？

<div clas……
[/Quote]
我知道怎么能把他对齐了，但是不知道为什么设置div的margin: 0 auto和padding:0 auto不能让整个table中间对齐。
就是想弄明白。

rosecshly0928 2012-03-14

打赏
举报

[Quote=引用 3 楼 rosecshly0928 的回复:]

引用 2 楼 lixinstudio 的回复:

要同时用margin: 0 auto和padding:0 auto
你用的什么浏览器？换着IE和Firefox对照一下应该有个是水平居中的

还是不行呀
[/Quote]
div用margin: 0 auto和padding:0 auto还是不能对齐，我用的ie 8和firefox9.