image_html/css_WEB-ITnose の垂直方向のセンタリングを実現するフロントエンド技術 CSS

画像の垂直方向の中央揃えを実現するフロントエンド技術 CSS

多分そうだ 2015-03-14 18:52 に公開されました

画像の水平方向の中央揃えを実現するのは比較的簡単です。 text-align 属性を追加するだけです。親コンテナの中央に配置されます。純粋な CSS を使用して画像の垂直方向の中央揃えを実現するには、画像ラッピング コンテナーの表示プロパティを table-cell に設定し、vertical-align: middle を追加します。 table-cell の表示効果は table と同じで互換性も悪くないので、Table で表示する場合は table を直接使って画像を囲んでも同様の効果が得られると思います。 -セルでは、エッジの距離を制御するのが困難です。

上記のことを完了することに加えて、画像自体にもいくつかの処理が必要です。一般に、中央に表示される画像のサイズと比率が一致しません。この場合、イメージタグ自体に付属する width 属性と height 属性を削除してから、max-width 属性と max-height 属性を設定する必要があります。

CSS を使用して画像を中央に配置することに加えて、画像の margin-top 属性の値を計算して、画像の高さ属性と幅属性、および表示領域のサイズに基づいて通常のオフセット位置を取得することもできます。 。この方法は結局のところ、画像ごとに計算する必要があり、画像の幅と高さの属性が正確であることを保証することが難しく、画像が変形する可能性があります。

Web サイトの価値が高い場合、画像を単に中央に配置するだけでは、必ずしも優れた視覚体験が得られるとは限りません。たとえば、QQ Space は画像の表示を特に最適化し、画像内に顔がある場合、その顔がサムネイルで強調表示されます。この画像認識テクノロジにはサーバーのサポートが必要です。

以下に画像の中央揃えを実現するコードの一部を添付します:

<style>.imgTab{    border-collapse: collapse;    border-spacing: 0;    text-align: center;}.imgTab td{    padding: 5px;}.imgWrap {    width: 200px;}.imgWrap img{    max-height: 200px;    max-width: 200px;}</style><table class="imgTab">    <tr>        <td>            <div class="imgWrap">                <img src="" />            </div>        </td>    </tr></table>

読む (253) コメント (0) コメントを見る