web-dev-qa-db-ja.com

divの画像を垂直に配置

私は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;」が必要です。画像を中央に配置し、それが動作します。また、チュートリアルでは多くの答えを見つけましたが、すべての画像が同じ高さではないため、「有用」ではありません。

cssimagevertical-alignment
58
aainaarz

コンテナの高さが固定されている場合、line-heightを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/

UPDATE

2016年（将来！）になり、いくつかの状況が変化しているようです（最終的には!!）。

2014年に戻って、 Microsoft発表 WindowsのすべてのバージョンでIE8のサポートを停止し、すべてのユーザーがIE11またはEdgeに更新することを推奨します。さて、これは来週の火曜日（1月12日）に起こるはずです。

なぜこれが重要なのですか？ IE8の発表されたdeathで、最終的に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の詳細については、 こちらが適切なリソースです 。

ハッピーコーディング。

132
Cthulhu

古い質問ですが、nowadaysCSS ​​は実際に垂直方向の整列を行いますsimple！

このCSSを<div>に追加するだけです：

display:flex;
align-items:center;
justify-content:center;

JSFiddleデモ

ライブの例：

.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;
    display:flex;
    align-items:center;
    justify-content:center;
}
<div class="img_thumb">
    <a class="images_class" href="http://i.imgur.com/2FMLuSn.jpg" rel="images">
       <img src="http://i.imgur.com/2FMLuSn.jpg" title="img_title" alt="img_alt" />
    </a>
</div>
23
Jaqen H'ghar

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

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/

3
Shailender Arora