css - div display: inline-block; 置中？-PHP中文网问答

文章专题 AI工具学习下载问答源码最近更新

PHP

会员中心讲师中心微信公众号

css - div display: inline-block; 置中？

PHPz 2017-04-17 14:46:49

[HTML讨论组]

851

.layout
{
  width: 760px;
  margin: 150px auto 0 auto;
}
.layout2
{
  width: 250px;
  display: inline-block;
}

<p class="layout">
  <p class="layout2">
    1
  </p>
  <p class="layout2">
    2
  </p>
  <p class="layout2">
    3
  </p>
</p>

請問如何讓layout2 p能夠置中對齊呀？
另外
若是layout改成750寬
layout2設250寬
第三個p會跑到下面去....

PHPz

学习是最好的投资！

全部回复(6)

迷茫2017-04-17 14:48:49 6楼

代码贴上：

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

<p class="layout">
  <p class="layout2">
    1
  </p>
  <p class="layout2" >
    2
  </p>
  <p class="layout2">
    3
  </p>
</p>
</body>
</html>

如上设置父元素font-size:0前提是你必须设置子元素也就是inline-block的font-size 设置好字体要不然就什么都不会显示

参考文献：http://sentsin.com/web/23.html

赞 +0

添加回复

巴扎黑2017-04-17 14:48:49 5楼

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

赞 +0

添加回复

PHP中文网2017-04-17 14:48:49 4楼

inline-block有间距，需要去掉
参见这篇文章
http://www.zhangxinxu.com/wor...

layout2居中对齐是什么意思？

赞 +0

添加回复

ringa_lee2017-04-17 14:48:49 3楼

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

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

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

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

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

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

赞 +0

添加回复

大家讲道理2017-04-17 14:48:49 2楼

其实一个浮动就可以解决

    .layout
    {
        width: 750px;
        margin: 0 auto;
        margin-top: 150px;
        background-color: red;
    }
    .layout2
    {
        width: 250px;
        background-color: blue;
        float: left;
        text-align: center;
    }

赞 +0

添加回复