Question

嗨我正努力将这三张图片放在页面中间，香港专业教育学院在一个div（行）中包含所有3个图像，然后将其包含在另一个div（页面）中，这可能是不必要的，

我将黄色div（页面）居中，但无法解决如何将黄色div中的蓝色div（行）居中。

这是我项目的一个方面：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可能不是必需的，但我已将其包含在内，以便让您更好地了解最新情况

Answer 1

解决方案是不使用浮点数将图像放在同一行上，而是使用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;
}

Answer 2

http://jsfiddle.net/7NQKU/49/ .row已经是一个内嵌块，因此，将text-align:center;添加到.page将会.row居中，而不会更改其余代码。

Answer 3

您可以通过在必要时添加此JavaScript来将行放在页面中心：

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

由于您的图片在切换时会重新调整大小，因此在重新调整尺寸时您将不得不再次使用此图片。

中心分区内的Div，内容为浮动内容

3 个答案: