div中的多个div怎样垂直居中
如下所示，我需要class为box2,box3,box4,box5的这4个div排成一行并在box1中垂直居中，css要怎么写？<divid="registerBox">...
如下所示，我需要class为box2,box3,box4,box5的这4个div排成一行并在box1中垂直居中，css要怎么写？
<div id="registerBox">
<div class="box1" id="usernameBox">
<div class="box2">
<label class="label1">用户名</label>
</div>
<div class="box3">
<input type="text" class="input1" id="username" placeholder="用户名" />
</div>
<div class="box4"></div>
<div class="box5"><p>请输入长度大于2的字符(数字/英文字母/符号/汉字)</p></div>
</div>
<div class="box1" id="emailBox">
<div class="box2"><label class="label1">Email</label></div>
<div class="box3"><input type="text" class="input1" id="email" placeholder="Email" /></div>
<div class="box4"></div>
<div class="box5"><p>请输入正确的Email地址</p></div>
</div>
</div> 展开
<div id="registerBox">
<div class="box1" id="usernameBox">
<div class="box2">
<label class="label1">用户名</label>
</div>
<div class="box3">
<input type="text" class="input1" id="username" placeholder="用户名" />
</div>
<div class="box4"></div>
<div class="box5"><p>请输入长度大于2的字符(数字/英文字母/符号/汉字)</p></div>
</div>
<div class="box1" id="emailBox">
<div class="box2"><label class="label1">Email</label></div>
<div class="box3"><input type="text" class="input1" id="email" placeholder="Email" /></div>
<div class="box4"></div>
<div class="box5"><p>请输入正确的Email地址</p></div>
</div>
</div> 展开
展开全部
要让DIV水平和垂直居中，必需知道该DIV得宽度和高度，然后设置位置为绝对位置，距离页面窗口左边框和上边框的距离设置为50%，这个50%就是指页面窗口的宽度和高度的50%，最后将该DIV分别左移和上移，左移和上移的大小就是该DIV宽度和高度的一半。
.mydiv{
width:300px;
height:200px;
position:absolute;
left:50%;
top:50%;
margin:-100px 0 0 -150px
}
.mydiv{
width:300px;
height:200px;
position:absolute;
left:50%;
top:50%;
margin:-100px 0 0 -150px
}
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
可以尝试将box1设为 display:table-cell; vertical-align:middle
不过貌似不兼容IE7或以下
不过貌似不兼容IE7或以下
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
如果真出现这种比较难用css控制的情况，建议可以使用表格！
既轻松又避免兼容性问题！
既轻松又避免兼容性问题！
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
把
<style type="text/css">
<!--
div{margin:0 auto; padding:0;}
p,input,label{margin:0; padding:0;}
input,label{height:21px;}
.box1{width:auto; height:25px; overflow:hidden;}
.box2,.box3,.box4,.box5{width:auto; height:25px; line-height:25px; float:left; overflow:hidden; font-size:12px;}
-->
</style>
放到<head></head>之间
<style type="text/css">
<!--
div{margin:0 auto; padding:0;}
p,input,label{margin:0; padding:0;}
input,label{height:21px;}
.box1{width:auto; height:25px; overflow:hidden;}
.box2,.box3,.box4,.box5{width:auto; height:25px; line-height:25px; float:left; overflow:hidden; font-size:12px;}
-->
</style>
放到<head></head>之间
追问
如果我设置
.box1{height:100px;}
其他不变怎么垂直居中？
追答
不好意思，昨天下班了……
本回答被提问者和网友采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
更多回答（2）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
