2

こんにちは、これらの 3 つの画像をページの中央に配置するのに苦労しています。3 つの画像すべてを 1 つの div (行) 内に囲み、それを別の div (ページ) に含めましたが、これはおそらく不要です。

黄色の div (ページ) を中央に配置しましたが、黄色の div 内で青色の div (行) を中央に配置する方法がわかりません。

これが私のプロジェクトの jsfiddle です: http://jsfiddle.net/edddotcom/7NQKU/11/

またはここにコードがあります：

CSS:

.page {
    width:850px;
    margin-left: auto;
    margin-right: auto;
    background-color:yellow;

}
.row {
    max-width: 840px;
    background-color: blue;
    display: inline-block;
    text-align: center;
    margin-left: auto;
    margin-right: auto;

}
.container {
    display: block;
    float: left;
    width: 200px;
    height: 116px;
    background-color: red;
    margin: 5px;
}
span {
    margin-top: 10px;
    margin-left: 10px;
    max-height: 100%;
    text-align: justify;
}
img {
    width:100%;
    max-width: 400px;
    min-width: 200px;
}

HTML:

<div class="page">
    <div class="row">
        <div class="container">
            <img src="http://cloudsmaker.com/hipsterwall/img/salto-al-norte.jpg"> <span>TEXT HERE TEXT HERE TEXT HERE TEXT HERE TEXT HERE TEXT HERE TEXT HERE TEXT HERE TEXT HERE TEXT HERE TEXT HERE TEXT HERE TEXT HERE TEXT HERE TEXT HERE TEXT HERE TEXT HERE TEXT HERE TEXT HERE TEXT HERE TEXT HERE </span>

        </div>
        <div class="container">
            <img src="http://cloudsmaker.com/hipsterwall/img/salto-al-norte.jpg"> <span>TEXT HERE TEXT HERE TEXT HERE TEXT HERE TEXT HERE TEXT HERE TEXT HERE TEXT HERE TEXT HERE TEXT HERE TEXT HERE TEXT HERE TEXT HERE TEXT HERE TEXT HERE TEXT HERE TEXT HERE TEXT HERE TEXT HERE TEXT HERE TEXT HERE </span>

        </div>
        <div class="container">
            <img src="http://cloudsmaker.com/hipsterwall/img/salto-al-norte.jpg"> <span>TEXT HERE TEXT HERE TEXT HERE TEXT HERE TEXT HERE TEXT HERE TEXT HERE TEXT HERE TEXT HERE TEXT HERE TEXT HERE TEXT HERE TEXT HERE TEXT HERE TEXT HERE TEXT HERE TEXT HERE TEXT HERE TEXT HERE TEXT HERE TEXT HERE </span>

        </div>
    </div>
</div>

JavaScript:

$(document).ready(function () {
    //ON CLICK
    $("span").hide();
    $("img").toggle(function () { //fired the first time
        $(".container").css({
            "height": "116px",
                "width": "200px"
        });
        $("span").hide();
        $(this).parent().animate({
            //FIRSTCLICK COMMAND
            height: "400px",
            width: "400px"

        }, function () {
            $(this).children("span").show();
        });
        //Enlarges container then shows text

    }, function () { // fired the second time 
        $(this).siblings("span").hide(0, '', function () {
            $(this).parent(".container").animate({
                //SECONDCLICK COMMAND
                height: "116px",
                width: "200px"
            });
        });

    }); //Hides text then contracts container

});

JavaScript はおそらく必要ありませんが、何が起こっているのかをよりよく理解できるように含めました。

4

3 に答える 3

2

解決策は、フロートを使用して画像を同じ行に配置するのではなく、display: inline-block; を使用することです。および text-align: center; それをラップしているブロック要素で。

ここにフィドルがあります: http://jsfiddle.net/F9Wmg/ プレビュー: http://fiddle.jshell.net/F9Wmg/show/

私が追加したコードは次のとおりです。

.page {
    text-align: center;
}

.container {
    vertical-align: top;
    float: none;
    display: inline-block;
}
于 2013-04-21T23:08:18.010 に答える
0

必要に応じて次の JavaScript を追加することで、行をページの中央に配置できます。

var pageWidth = $('.page').width();
var rowWidth = $('.row').width();
$('.row').css('margin-left', (pageWidth - rowWidth)/2);

写真はトグルでサイズ変更されるため、サイズ変更時にこれを再度使用する必要があります。

于 2013-04-21T23:13:37.193 に答える