css - div display: inline-block; 置中？
本文介绍了css - div display: inline-block; 置中？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
问 题
.layout
{
width: 760px;
margin: 150px auto 0 auto;
}
.layout2
{
width: 250px;
display: inline-block;
}
<div class="layout">
<div class="layout2">
1
</div>
<div class="layout2">
2
</div>
<div class="layout2">
3
</div>
</div>請問如何讓layout2 div能夠置中對齊呀？
另外
若是layout改成750寬
layout2設250寬
第三個div會跑到下面去....
解决方案
代码贴上：
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
.layout
{
width: 750px;
margin: 150px auto 0 auto;
background: #cccccc;
font-size: 0;
}
.layout2
{
width: 250px;
display: inline-block;
*display: inline;;
*zoom:1;
font-size: 20px;
background: #666666;
text-align: center;
}
</style>
</head>
<body>
<div class="layout">
<div class="layout2">
1
</div>
<div class="layout2" >
2
</div>
<div class="layout2">
3
</div>
</div>
</body>
</html>如上 设置父元素font-size:0前提是你必须设置 子元素 也就是inline-block的font-size 设置好字体 要不然 就什么都不会显示
参考文献：http://sentsin.com/web/23.html
这篇关于css - div display: inline-block; 置中？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
