css - div display: inline-block; 置中?
PHPz
PHPz 2017-04-17 14:46:49
0
6
598
.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
PHPz

学习是最好的投资!

reply all(6)
迷茫

Code pasted:

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

Set the parent element as above font-size:0 The prerequisite is that you must set the font-size of the child element, that is, inline-block and set the font, otherwise nothing will be displayed

Reference: http://sentsin.com/web/23.html

巴扎黑

has spaces, set font-size:0

in the parent element
Ty80

The inline-block has spacing and needs to be removed
See this article
http://www.zhangxinxu.com/wor...

What does layout2 center alignment mean?

左手右手慢动作

Let me add something. In fact, there is no need to set 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>

You can write it like this.
The space between inline-block element tags causes gaps between inline-blocks.

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

Or write like this, filling in your formatting with comments.

This way there is no need to add additional styles, after all the comments will be compressed when the code is online.

大家讲道理

In fact, a float can solve it


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

Spaces are also characters. Set font-size:0; on the parent element of inline-block to eliminate it.

Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!