1

カレンダー コンポーネントとボタンの 2 つの項目があります。高さ/幅が異なります。

それらを水平方向および垂直方向に一列に並べるにはどうすればよいですか?

テーブル？分？...

私は、各オブジェクトが 50% の領域を持ち、その中心にあると考えています。ただし、水平方向に (互いの間にギャップを置いて) センタリングすることは可能です。次に、それらをペアとして垂直方向に中央揃えにします。

4

2 に答える 2

2

これは私のために働いた：http：//jsfiddle.net/bpkH4/。一部のCSSは純粋に装飾的です。

<!DOCTYPE html>
<html>
<head>
    <style type="text/css">
    #btn
    {
        background-color:#FF0000;
        width:100px;
        height:30px;
    }

    #comp
    {
        background-color:#00FFFF;
        width:200px;
        height:200px;
    }

    #container
    {
        width:500px;
        height:300px;
        overflow:auto;
        background-color:#CCCCCC;           

        text-align:center;
    }

    .contain
    {

        background-color:#AAAAAA;
        float:left;
        width:50%;
        height:100%;
        position: relative;
    }

    .elem
    {
        position: absolute;
        top:0;
        bottom:0;
        left:0;
        right:0;
        margin:auto;
    }
    </style>
</head>
<body>
    <div id="container">
        <div class="contain">
            <div class="elem" id="comp">Component in Here</div>
        </div>
        <div class="contain">        
            <div class="elem" id="btn">Button</div>
        </div>
    </div>
</body>
</html>
于 2012-11-14T20:31:24.350 に答える
0

それらをコンテナ div に入れて、margin: 0 auto; を設定します。水平方向の中央に配置します。同じ手法を使用して、コンテナーをページの水平方向の中央に配置することもできます。

CSS 水平整列

センタリング: 自動幅マージン

コンテナの垂直センタリングの場合:

CSSで縦方向にセンタリングする6つの方法

于 2012-11-14T17:59:06.663 に答える