2

3つのフローティングDIVを中央に配置しようとしています。親DIVにdisplay：tableを指定すると機能します。子DIVはdisplay：cell;です。これはテーブルのように機能します。別の方法はありますか？

<!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 に答える