如何让input框在div中水平居中？满足IE678 FF情况下

AndyYuan10000 2012-01-04 02:41:23

<div style="border:1px solid red;width:100%;height:300px;display:table;*position:relative;" id="main">
<div id="nav" style="display:table-cell;width:100%;background-color:#e7dbcd;top:50%;vertical-align:middle;*position:relative;">
<div style="display:table-cell;*position:absolute;top:50%;">
<input type="text"/>
<input type="text"/>
</div>
</div>
</div>

以上垂直居中？现在想满足水平居中？如何做？

...全文

5226 11 打赏收藏转发到动态举报

写回复

用AI写文章

11 条回复

切换为时间正序

请发表友善的回复…

发表回复

luliangshu350 2012-01-04

打赏
举报

。。修改好了。。



<div style="border:1px solid red;width:100%;  background-color:#e7dbcd; display:table ; overflow:hidden; margin:0 auto; height: 300px; *position:relative;">

    <div style="display:table-cell; vertical-align: middle; *position:absolute; top:50%;">

        <div style="*position:relative; *top:-50%; text-align:center; width:220px; margin:0 auto;">

            <input type="text" style="width:100px;"/>

            <input type="text" style="width:100px;"/>

        </div>

    </div>

</div>

这个肯定兼容了。。弄了半天才搞到IE8

luliangshu350 2012-01-04

打赏
举报

改进了下。。刚代码垃圾了



<div style="border:1px solid red;width:100%;  background-color:#e7dbcd; display:table ; overflow:hidden; margin:0 auto; height: 300px; *position:relative;">

    <div style="display:table-cell; vertical-align: middle; *position:absolute; top:50%;">

        <div style="*position:relative; *top:-50%; text-align:center; width:100%;">

            <input type="text" style="width:100px;"/>

            <input type="text" style="width:100px;"/>

        </div>

    </div>

</div>

PPQTANKPPQ 2012-01-04

打赏
举报

全加 style=“float:left” 试试

luliangshu350 2012-01-04

打赏
举报

我这没IE8 。。测试不了。。蛋疼

AndyYuan10000 2012-01-04

打赏
举报

luliangshu350 IE8 存在问题。

luliangshu350 2012-01-04

打赏
举报



<div style="border:1px solid red;width:100%;height:300px;display:table;*position:relative; background-color:#e7dbcd;">

    <div style="width:500px; display:table; overflow:hidden; margin:0 auto; height: 100%; *position:relative;">

        <div style="display:table-cell; vertical-align: middle; *position:absolute; top:50%;">

            <div style="*position:relative; *top:-50%;">

                <div style="width:220px; margin:0 auto;">

                    <input type="text" style="width:100px;"/>

                    <input type="text" style="width:100px;"/>

                </div>

            </div>

        </div>

    </div>

</div>

已经改好 ID都给你去了你自己加上。明显可以用表格的。表格不是不要，当用表格简单的时候就别考虑DIV 你这个地方也不需要语义化什么的。不是一定什么都要DIV实现的。用表格很简单。

MuBeiBei 2012-01-04

打赏
举报

前面改成加号

MuBeiBei 2012-01-04

打赏
举报

<div style="*position:absolute;top:50%;+left:44%;text-align:center;">

把之前_left:44%;改成+left:44%;

AndyYuan10000 2012-01-04

打赏
举报

IE7不行

luliangshu350 2012-01-04

打赏
举报

楼主可以参见支付宝的CSS解决方案网址http://aliceui.com/vertical-horizoncal/
具体就不写了里面介绍的很详细

MuBeiBei 2012-01-04

打赏
举报

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"> 

<head>

	<meta charset="UTF-8">

	<title></title>



</head>

<body>

    <div style="border:1px solid red;width:100%;height:300px;display:table;*position:relative;" id="main">

	<div id="nav" style="display:table-cell;width:100%;background-color:#e7dbcd;top:50%;vertical-align:middle;*position:relative;">

	<div style="*position:absolute;top:50%;_left:44%;text-align:center;">

	<input type="text"/>

	<input type="text"/>

	</div>

	</div>	

	</div>



</body>

</html>