画像を水平方向と垂直方向に中央揃えにする CSS_html/css_WEB-ITnose

いわゆる画像の水平方向および垂直方向のセンタリングとは、画像をコンテナ要素 (画像サイズよりも大きいコンテナ、または指定されたサイズのコンテナ) に配置することを意味し、画像は中央に配置されます。コンテナ (中央はコンテナ要素の中央を指します) であり、画像は背景画像の形式ではなく、 要素の形式で表示されます。下の図に示すように:

問題を解決するには?? 画像を水平方向と垂直方向に中央揃えにします

画像が左に浮いていて「display:inline」の場合、水平方向の中央揃えを解決するのは非常に簡単です。画像の「text-align」を設定する必要があります。 :center」属性により、水平方向の中央揃えの問題が正常に解決されます。

最新のブラウザでは、垂直方向の中央揃えに最適なソリューションとして、画像コンテナーに「dipslay:table-cell;vertical-align:middle」を設定できます。このメソッドは画像を垂直方向にスムーズに中央揃えにできますが、実行できるのは でのみです。最新のブラウザでは、IE6 ～ 7 では正しく動作しません。これは達成不可能でしょうか？心配しないでください、皆さん、次のメソッドを見てみましょう:

1. table-cell と display:inline

このメソッドは素晴らしいと前に言いました。最新のブラウザでは、画像を中央に配置するのが最善の方法ですが、IE6 ～ 7 では、display:table-cell をサポートしていません。実際には、IE6 ～ 7 では、別の方法で記述するだけで十分です。実際、原理をマスターすれば、IE で実装するのは難しくありません。まずこのアイデアを見てみましょう:

1. まず、コンテナ要素に "display:table-cell;vertical-align:middle;" を設定します。これで、ブラウザーが垂直方向に中央揃えになりました
2. IE6 ～ 7 の場合は、画像コンテナーと同じ高さのワイヤー ボックスを作成し、このワイヤー ボックスに "vertical-align:middle" を設定するのが良い方法です。

次のキーは、IE6 ～ 7 用のライン ボックスを作成することです。幸いなことに、IE6 ～ 7 は「dipslay:inline-block」を部分的にサポートしています。このようにして、画像コンテナ内に空の要素 (span など) を作成し、span の「display:inline-block;height:100%;vertical-align:middle」を設定できます。

ラインボックスを作成する際に注意が必要な点があります。IE6-7 では空のラインブロック要素の幅は「0」ですが、現時点では IE6-7 では影響がありません。 「width:」をspan: 1pxに追加する必要があります。これにより、水平方向のセンタリングで1pxのエラーが発生しますが、このバグは許容できます。

そして、最終的な解決策は display:table-cell を使用し、display:inline-block の行幅を設定することです。 もちろん、IE 用の特別なコードを記述する必要があります。次にコードを見てみましょう:

<ul class="imgWrap clearfix">                <li><a href="#" class="imgBox"><span></span><img src="images/img1.jpg" alt="" /></a></li>                <li><a href="#" class="imgBox"><span></span><img src="images/img2.jpg" alt="" /></a></li>                <li><a href="#" class="imgBox"><span></span><img src="images/img3.jpg" alt="" /></a></li>                <li><a href="#" class="imgBox"><span></span><img src="images/img4.jpg" alt="" /></a></li>            </ul>        

2.の画像

span inline 要素をインライン ブロック要素として設定します。つまり、表示を「inline-block」に設定し、幅を 1px、高さをコンテナの 100% に設定します。コンテナの高さと同じにし、「vertical-align:middle」を渡すと、目的の効果が得られるように垂直方向の配置が設定されます。この方法は上記の方法よりも優れていると感じます。最も重要なことは、IE 単独でエフェクトを記述しないことです。このメソッドの構造は少し複雑ですが、IE6 ～ 7 ではそれが必要です。ハックと組み合わせて生成します。この方法は、テーブルの形状をシミュレートして、画像の垂直方向の中央揃えの効果を実現します。

テーブルには行 (テーブル行) とセル (テーブルセル) があることは誰もが知っています。テーブルのセルの "vertical-align: middle" は要素を垂直方向に中央揃えにすることができるため、次の例ではこれに基づいて Made を使用しています。原理、コードを見てみましょう

<style type="text/css">                .imgWrap li {                    float: left;                    border: solid 1px #666;                    margin: 10px 10px 0 0;                    list-style: none;                    border-collapse: collapse;                 }                .imgWrap a {                    background: #ffa url(images/gridBg.gif) repeat center;                    width: 219px;                    height: 219px;                    display: table-cell;/*图片容器以表格的单元格形式显示*/                    text-align: center; /* 实现水平居中 */                    vertical-align: middle; /*实现垂直居中*/                                    }                .imgWrap a:hover {                    background-color: #dfd;                }                .imgWrap img {                    border: solid 1px #66f;                    vertical-align: middle; /*图片垂直居中*/                }                </style>                <!--下面是解决IE6-7的正常显示的代码-->                <!--[if lt IE 8]>                    <style type="text/css">                    .imgWrap a {                        display: block;                    }                    .imgWrap span {                        display: inline-block;                        vertical-align: middle;                        height: 100%;                    }                    .imgWrap {                        _height: 0;                        zoom: 1;                    }                    </style>                <![endif]-->

<ul class="imgWrap clearfix">                <li><a href="#" class="imgBox"><span></span><img src="images/img1.jpg" alt="" /></a></li>                <li><a href="#" class="imgBox"><span></span><img src="images/img2.jpg" alt="" /></a></li>                <li><a href="#" class="imgBox"><span></span><img src="images/img3.jpg" alt="" /></a></li>                <li><a href="#" class="imgBox"><span></span><img src="images/img4.jpg" alt="" /></a></li>            </ul>

4. 画像を中央に配置する jQuery メソッド

このメソッドは非常に簡単です。つまり、変換するには jQuery メソッドを使用する必要があります。画像を親要素 Picture の背景に配置し、親要素の中央に背景画像を表示し、自身の透明度を「0」に設定します。これにより、画像を中央に配置する効果も得られます。

HTML マークアップ

rree

CSS コード

<style type="text/css">                .imgWrap li{                     width: 219px;                    height: 219px;                    float: left;                    border: solid 1px #666;                    margin: 10px 10px 0 0;                    list-style: none;                    text-align: center;                    font-size: 0;                }                .imgWrap a {                    display: block;                    height: 100%;                    background: #ffa url(images/gridBg.gif) repeat center;                }                .imgWrap a:hover {                    background-color: green;                }                .imgWrap span {                    display: inline-block;/*将行内元素改变为行内块元素显示*/                    width: 1px;/*实现ＩＥ下可读效果*/                    height: 100%;/*使用元素高度和图片容器高度一样*/                    vertical-align: middle;/*垂直对齐*/                }                .imgWrap img {                    vertical-align: middle;                }            </style>

jQuery コード

<ul class="imgWrap clearfix">                <li>                    <div class="table">                        <div class="tableCell">                            <a href="#" class="imgBox"><img src="images/img1.jpg" alt="" /></a>                        </div>                    </div>                    </li>                <li>                    <div class="table">                        <div class="tableCell">                            <a href="#" class="imgBox"><img src="images/img2.jpg" alt="" /></a>                        </div>                    </div>                    </li>                <li>                    <div class="table">                        <div class="tableCell">                            <a href="#" class="imgBox"><img src="images/img3.jpg" alt="" /></a>                        </div>                    </div>                    </li>                <li>                    <div class="table">                        <div class="tableCell">                            <a href="#" class="imgBox"><img src="images/img4.jpg" alt="" /></a>                        </div>                    </div>                    </li>            </ul>