div css如何实现子DIV里的多个子DIV水平居中？
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了div css如何实现子DIV里的多个子DIV水平居中？相关的知识，希望对你有一定的参考价值。
<div class="find_center">
<DIV id="find_button">
<DIV class="find_button_left"></DIV>
<DIV class="find_button_center"><a href="#">查询查询查询查询查询查询查询</a></DIV>
<DIV class="find_button_right"></DIV>
</DIV>
<DIV id="find_button">
<DIV class="find_button_left"></DIV>
<DIV class="find_button_center"><a href="#">查询</a></DIV>
<DIV class="find_button_right"></DIV>
</DIV>
<DIV id="find_button">
<DIV class="find_button_left"></DIV>
<DIV class="find_button_center"><a href="#">查询查询查询查询查询查询</a></DIV>
<DIV class="find_button_right"></DIV>
</DIV>
</div>
我要实现3个find_button水平剧中
.find_center
height: 25px;
.find_button
height: 25px;
.find_button_left
width: 9px;
height: 22px;
background-image:url(f01.jpg);
margin-left:10px;
float: left;
.find_button_center
height: 17px;
background-image:url(f02.jpg);
float: left;
text-align: center;
padding-top:5px;
.find_button_center a
font-size: 12px;
color: #fff;
text-decoration:none;
.find_button_center a:hover
color:#000;
.find_button_right
width: 9px;
height: 22px;
background-image:url(f03.jpg);
float: left;
<div id="center">
<!-- 这里是要居中的所有代码。-->
</div>
然后在css文件中给它定义外边距、宽、高等，如：
#centermargin:0 auto;width:500px;height:200px;background:#900;
/*margin:0 auto;解决居中问题；width:500px;height:200px;指明宽和高；background:#900;设为红色背景以便看到效果。*/ 参考技术B
<style type="text/css">
.main height:100px; background:red; margin:0px auto; width:480px;
p text-align:center; width:500px; height:200px; background:yellow;
</style>
<body>
<div class="main"></div>
<p>在中间</p>
</body>
效果图：
红色区域永远是水平居中的，无论浏览器宽度是多少的。
margin:0px auto;(记得设定这个div的宽度)
text-align:center;是用于文字的水平居中。
参考技术C 你这个也太小题大作了吧、把你的find_center的高取消了、让它自动、然后再设text-align:center; 参考技术D #find_buttonheight: 25px;
width: 950px;
margin: 0 auto;/*需设置宽度才能居中,*/
text-align:center;/*如果无法兼容IE6,可以加上这句*/
第5个回答 2011-04-28 其实像这样的情况 我建议你不要用这么多div
开始三个还可以用div。到最里面的三个div的时候我建议还是用ul li的好。
而且也方便。
实现div里的img图片水平垂直居中
<body> <div> <img src="1.jpg" alt="haha"> </div> </body>
将display设置成table-cell，然后水平居中设置text-align为center，垂直居中设置vertical-align为middle。
<style type="text/css">
*{margin: 0;padding: 0;}
div{
width:150px;
height: 100px;
display: table-cell;
vertical-align: middle;
text-align: center;
border:1px solid #000;
}
img {
width: 50px;
height: 50px;
}
</style>
以上是关于div css如何实现子DIV里的多个子DIV水平居中？的主要内容，如果未能解决你的问题，请参考以下文章