2

Hi im struggling to center these three images in the middle of the page, ive enclosed all 3 images within one div (row) which i have then enclosed in another div (page) which is probably unnecessary,

ive centered the yellow div (page) but cant work out how to center the blue div (row) within the yellow div.

Heres a jsfiddle of my project: http://jsfiddle.net/edddotcom/7NQKU/11/

or here's the code:

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

});

The JavaScript probably isn't necessary but I've included it to give you a better idea of whats going on

4

3 回答 3

2

http://jsfiddle.net/7NQKU/49/ .row已经是一个内联块，所以很简单，添加text-align:center;到.page将居中.row而不更改其余代码。

于 2013-04-22T00:31:53.937 回答
2

解决方案是不使用浮动将图像放在同一行，而是使用 display: inline-block; 和文本对齐：居中；在包装它的块元素上。

这是一个小提琴： 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 回答