1

私はこの非常に単純な HTML と CSS ( jsFiddle ) を持っており、入力とリンクをすべて div の中央に垂直に並べて表示したいだけです。次のようになります。

                             -----------     -----------     -----------
      ------------------     |         |     |         |     |         |
      |                |     |         |     |         |     |         |
      ------------------     |         |     |         |     |         |
                             -----------     -----------     -----------

display: tableandを使用できることはわかっていますが、以下のコメントvertical-align: middleで説明しているように、それはうまくいきません...他に使用できるアプローチはありますか?

<div>
    <input type="text"/>
    <a></a>    
    <a></a>
    <a></a>
</div>

-------------------------------

div {
    width: 100%;
    height: 100px;
    background-color: red;
}

input {
    display: inline-block;
}

a {
    display: inline-block;
    width: 80px;
    height: 80px;
    background-color: white;
}
4

2 に答える 2

1

より多くの要素が必要になると思います。CSS の位​​置とマージンの組み合わせを使用して、要素を中央に配置するのが好きです。

すべての要素を div.container にラップしました。

.container{
    position: relative;
    height: 100%;
}

そして、div.item のそれぞれ:

.item {
    width: 100px;
    height: 100%;
    float: left;
    position: relative;
}

次に、それらの要素にクラスを追加しました（入力とa）

.vertical-align {
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
}

例はhttp://jsfiddle.net/VEQe2/で見ることができます

于 2013-11-13T00:28:18.507 に答える