8

レスポンシブ画像を垂直方向に中央揃えする簡単な方法があるかどうか疑問に思っています。

次の jsFiddle を参照してください: http://jsfiddle.net/persianturtle/yawTb/1/

基本的な HTML:

<img class="mobile-title-size" src="http://zx85.dyndns.org/raphtest/img/title.png" alt="Logo">

基本的な CSS:

.mobile-title-size {
position: absolute;
top: 2.5%;
left: 6%;
width: 70%;
max-width: 300px;

}

これは、タブレットやデスクトップのビューポートに表示されるものと同じ画像を使用するモバイル ヘッダーです。いずれにせよ、画像は既に読み込まれているため、この同じ画像を使用してサイズを小さくし、垂直方向に揃えて、すべてのビューポートに 1 つの画像を使用できるようにします。

問題:ブラウザーのサイズ変更時に、画像は小さくなりますが、中央に垂直方向に整列しません。

目標:この例では幅がひどく重なっていますが、私のサイトでは問題になりません。目標は、ブラウザのサイズが変更されたときに画像を垂直方向に中央揃えにすることだけです。

私は javascript/jQuery ソリューションを使用しても問題ありませんが、もちろん単純な CSS をお勧めします。

どんな助けでも大歓迎です！

4

3 に答える 3

23

それにはいくつかの方法があります - 純粋な CSS または JS ベースの方法です。

更新された回答

更新: CSS 変換サポートの出現により、純粋な CSS を使用して要素を配置するかなり洗練されたソリューションがここにあります。指定されたマークアップで:

<div class="container">
    <img src="..." alt="..." title="..." />
</div>

CSS の場合:

.container {
    /* The container has to have a predefined dimension though */
    position: relative;
}
.container img {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

更新された JSFiddle

古い答え

CSS の場合、要素のコンテナー内にゴースト要素を構築できます<img>。Chris Coyier は、この手法について優れた記事を書いています。HTML コードが次のようになっているとします。

<div class="container">
    <img src="..." alt="..." title="..." />
</div>

次に、CSS は次のようになります。

.container {
    font-size: 0;
    text-align: center;
}
.container:before {
    content: "";
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}
.container > img {
    display: inline-block;
    vertical-align: middle;
}

機能的な CSS の修正は、このフィドル ( http://jsfiddle.net/teddyrised/yawTb/8/ ) で機能していることがわかります。

または、JS ベースの方法を使用できます。

$(document).ready(function() {
    $(window).resize(function() {
        $(".container > img").each(function() {
            var cHeight = $(this).parent(".container").height(),
                cWidth = $(this).parent(".container").width(),
                iHeight = $(this).height(),
                iWidth = $(this).width();

            $(this).css({
                top: 0.5*(cHeight - iHeight),
                left: 0.5*(cWidth - iWidth)
            });
        });
    }).resize();  // Fires resize event when document is first loaded
});

ただし、次の CSS を使用する必要があります。

.container {
    position: relative;
}
.container img {
    position: absolute;
    z-index: 100;
}

[編集]: 画像要素を絶対的に配置する JS ベースの方法の場合、要素のサイズを明示的に指定する.containerか、要素に何らかのコンテンツを含める必要があります (ただし、画像が上にあるため、目的に反します)コンテンツ）。これは、イメージ要素がドキュメント フローから取り出されたため、そのサイズが親コンテナーのサイズに影響を与えないためです。

JS バージョンの実例はこちら - http://jsfiddle.net/teddyrised/yawTb/7/

于 2013-03-15T23:04:14.820 に答える
0

それで、私が望んでいたとおりに機能するものを見つけました： http://jsfiddle.net/fmwzT/

問題は、ブートストラップの最新バージョン 2.3.1 でのみ動作することであり、その理由がわかりません (私のサイトには 2.3.0 があります)。

だから今、私は自分の質問に答え、さらに大きな質問を提起しました.これが機能する原因は何ですか?

次のコードを使用することに注意してください。

HTML

<div id="f1"><div id="outer-element"><img id="inner-element" src="http://zx85.dyndns.org/raphtest/img/title.png" alt="Logo"></div></div>

CSS

#fl {
    float: left;
}

#outer-element {
    display: table-cell;
    vertical-align: middle;
    height: 40px;
    max-width: 300px;
}

#inner-element {
    display: inline-block;
    margin-left: -20px;
}

注: これは、Bootstrap の neweste 2.3.1 バージョンがないと機能しません。

わかる方いたら質問投稿します！

于 2013-03-16T01:30:33.853 に答える