61

div の画像の垂直方向の位置合わせに問題があります

.img_thumb {
    float: left;
    height: 120px;
    margin-bottom: 5px;
    margin-left: 9px;
    position: relative;
    width: 147px;
    background-color: rgba(0, 0, 0, 0.5);
    border-radius: 3px;
}

.img_thumb img {
    display: block;
    margin-left: auto;
    margin-right: auto;
    vertical-align: middle;
}

<div class="img_thumb">
    <a class="images_class" href="large.jpg" rel="images"><img src="small.jpg" title="img_title" alt="img_alt" /></a>
</div>

私の知る限り、「display: block;」が必要です。画像を中央に配置すると機能します。また、チュートリアルでは多くの回答を見つけましたが、すべての画像が同じ高さではないため、それらは「役に立ちません」!

4

3 に答える 3

140

コンテナーの高さが固定されている場合、line-height を高さと同じに設定すると、垂直方向に中央揃えになります。次に、 text-align を追加して水平方向の中央に配置します。

例を次に示します: http://jsfiddle.net/Cthulhu/QHEnL/1/

編集

コードは次のようになります。

.img_thumb {
    float: left;
    height: 120px;
    margin-bottom: 5px;
    margin-left: 9px;
    position: relative;
    width: 147px;
    background-color: rgba(0, 0, 0, 0.5);
    border-radius: 3px;
    line-height:120px;
    text-align:center;
}

.img_thumb img {
    vertical-align: middle;
}

画像は、サイズに関係なく、常に水平方向と垂直方向の中央に配置されます。異なるサイズの画像を使用したさらに 2 つの例を次に示します。

http://jsfiddle.net/Cthulhu/QHEnL/6/

http://jsfiddle.net/Cthulhu/QHEnL/7/

アップデート

現在は 2016 年 (未来!) で、いくつかの変更が行われているようです (ついに!!)。

2014 年にMicrosoft は、すべてのバージョンの Windows で IE8 のサポートを停止し、すべてのユーザーに IE11 または Edge への更新を推奨すると発表しました。さて、これは来週の火曜日 (1 月 12 日) に行われる予定です。

なぜこれが重要なのですか？IE8 の廃止が発表されたことで、ついにCSS3マジックを使い始めることができます。

そうは言っても、水平方向と垂直方向の両方で要素を整列させる更新された方法は次のとおりです。

.container {
    position: relative;
}

.container .element {
   position: absolute;
   left: 50%;
   top: 50%;
   transform: translate(-50%, -50%);
}

このtransform: translate();方法を使用すると、コンテナーに高さを固定する必要さえありません。完全に動的です。要素の高さまたは幅が固定されていますか? あなたのコンテナも？いいえ？すべてのセンタリング プロパティが子に固定され、親から独立しているため、常にセンタリングされます。CSS3ありがとう。

1 つの次元のみを中央揃えする必要がある場合は、translateYまたはを使用できますtranslateX。しばらく試してみると、どのように機能するかがわかります。また、 の値を変更してみてくださいtranslate。さまざまな状況で役立つことがわかります。

ここに、新しいフィドルがあります: https://jsfiddle.net/Cthulhu/1xjbhsr4/

の詳細についてはtransform、こちらのリソースを参照してください。

ハッピーコーディング。

于 2012-04-04T10:08:55.293 に答える
5

インライン要素とブロック要素の垂直方向の位置合わせの中心が必要な場合は、位置を定義する必要はありません。以下のアイデアを参考にしてください。-

inline-elements :- <img style="vertical-align:middle" ...>
                   <span style="display:inline-block; vertical-align:middle"> foo<br>bar </span>  

block-elements :- <td style="vertical-align:middle"> ... </td>
                  <div style="display:table-cell; vertical-align:middle"> ... </div>

デモを参照してください：-http：//jsfiddle.net/Ewfkk/2/

于 2012-04-04T10:34:49.523 に答える