问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

div display: inline-block; 置中？

头像
五条悟
    2.8k2432803
    .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會跑到下面去....

    css3csshtml5html
    阅读 5.5k
    6 个回答
    得票最新
    头像
    四月的桜和猫
      3.3k53055
      ✓ 已被采纳

      clipboard.png

      代码贴上：

      <!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

      头像
      安于现状i
        8791410

        有空格，父元素中设置font-size:0

        头像
        pommy
          1.3k2717
          头像
          toBeTheLight
            16.6k41634

            补充一点吧。其实不用设置font-size:0；

                    <div class="layout2" style="background: red;">
                1
        </div><div class="layout2" style="background: yellow;">
                2
        </div><div class="layout2" style="background: green;">
                3
        </div>

            可以這麼寫。
            inline-block元素標籤間的空格導致的inline-block之間存在間隙。

               <div class="layout2">
   1
   </div><!--            
--><div class="layout2">
   2
   </div><!--            
--><div class="layout2">
   3
   </div>

            或者這麼寫，用註釋填充你的格式。

            這樣就不需要添加額外樣式了，畢竟代碼上線的時候註釋是會被壓縮掉的。

            头像
            hydra每一刻
              1
              新手上路，请多包涵

              其实一个浮动就可以解决

                  .layout
    {
        width: 750px;
        margin: 0 auto;
        margin-top: 150px;
        background-color: red;
    }
    .layout2
    {
        width: 250px;
        background-color: blue;
        float: left;
        text-align: center;
    }
              头像
              皮小蛋
                8k11

                空格也是字符。在inline-block的父元素上设置font-size:0;即可消除。

                撰写回答
                你尚未登录，登录后可以
                • 和开发者交流问题的细节
                • 关注并接收问题和回答的更新提醒
                • 参与内容的编辑和改进，让解决方法与时俱进
                被 1 篇内容引用
                推荐问题