4

アンカータグ内にある画像を垂直方向に整列させることは可能ですか？

DIV内で2つのアンカータグを使用しています。それぞれが垂直方向に中央に配置されている必要があります。あるテキストで画像を使用していますか？

PS：行の高さなし

4

9 に答える 9

11

垂直方向の配置は、テーブルセルに対してのみ機能するため、divで考えるようには動作しません。

これやこれのようにそれを機能させるためのCSS「ハック」はたくさんあります

于 2009-12-14T11:45:09.740 に答える
5

これを試して：

div{
    display: table-cell;
    vertical-align: middle;
}
于 2012-07-10T16:46:28.470 に答える
3

divタグ内で垂直方向に整列することはできませんが、テーブルセルを使用することはできます。画像とそのコンテナの高さを修正できれば、回避できます。

于 2009-12-14T11:38:31.020 に答える
2

ソリューションは、CSS を使用して非常に簡単です。

次に例を示します。

#anySection {
    background: white url(../images/anyImage.jpg) no-repeat center;
    height: 500px;
    width: 500px
}

マークアップ:

<div id="anySection"></div>

画像が中央に配置された 500 x 500 ピクセルのセクションが表示されます。

于 2011-11-15T23:21:09.380 に答える
1

私も同じ問題を抱えていました。これは私のために働く：

 <style type="text/css">
    div.parent {
         position: relative;
    }

    /*vertical middle and horizontal center align*/
    img.child {
        bottom: 0;
        left: 0;
        margin: auto;
        position: absolute;
        right: 0;
        top: 0;
    }
    </style>

    <div class="parent">
        <img class="child"> 
    </div>
于 2013-01-26T19:52:34.720 に答える
0

次の URL を参照してください。必要な回答が含まれているだけでなく、vertical align プロパティを包括的に理解することができます。

http://css-tricks.com/what-is-vertical-align/

于 2009-12-14T16:49:31.343 に答える
0

誰も指摘していないので、DOCTYPE によって異なる動作が得られます。

(私の場合、移行用の Doctype は、兄弟テキスト ノードなしでインライン要素を垂直方向に整列していませんでしたが、html5 はそうです。)

于 2013-01-08T19:03:54.257 に答える