2

我试图将 3 个浮动 DIV 居中。如果我给父 DIV display:table;它工作 子 DIV显示：单元格；然后它将像一张桌子一样。还有其他方法吗？

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <title>Center Div</title>
        <style type="text/css">
        #container
        {               
            text-align:center;
            margin:0 auto;          
            display:table;
        }
        #container div
        {           
            float:left;
            padding:5px;
            display:cell;
        }
        </style>
    </head>
    <body>  
        <div id="container">
            <div style="background-color:yellow">Text 1</div>
            <div style="background-color:lightgreen">Text 2</div>
            <div style="background-color:lightblue">Text 3</div>            
        </div>
    </body>
</html>
4

4 回答 4

0

我认为如果您定义宽度，显示：块，边距 0px 自动，位置：相对它应该可以工作。

于 2012-07-27T08:32:28.230 回答
0

尝试这个，

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <title>Center Div</title>
        <style type="text/css">
        #container
        {               
            text-align:center;
            margin:0 auto; 
            width:200px;

        }
        #container div
        {           
            float:left;
            padding:5px;
            display:cell;
        }
        </style>
    </head>
    <body>  
        <div id="container">
                <div style="background-color:yellow">Text 1</div>
                <div style="background-color:lightgreen">Text 2</div>
                <div style="background-color:lightblue">Text 3</div>

        </div>
    </body>
</html>
于 2012-07-27T08:53:46.793 回答
-2

您需要div像这样为父级分配宽度：

#container
  {               
    text-align:center;
    margin:0 auto;   
    width:150px;    
  }

我的小提琴

于 2012-07-27T08:30:44.470 回答
-2

有什么理由不想使用桌子？

它可能会解决这个目的。桌子并不像他们想象的那么邪恶；）

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
        <meta charset="UTF-8" /> 
        <title>Center Div</title> 
        <style type="text/css"> 
        #container 
        {                
            text-align:center; 
            margin:0 auto;
        } 
        #container td
        {   
            padding:5px;
        } 
        </style> 
    </head> 
    <body>   
        <div id="container">
            <table cellpadding="0" cellspacing="0" style="margin-left:auto;margin-right:auto;">
                <tr>
                    <td style="background-color:yellow">Text 1</td>
                    <td style="background-color:lightgreen">Text 2</td>
                    <td style="background-color:lightblue">Text 3</td>
                </tr>
            </table>
        </div> 
    </body> 
</html>
于 2012-07-27T08:49:32.020 回答