CODEWITHSUNDEEP
htmlcss
Eduardo
Eduardo

Reputation: 7141

Center A Div within a Div with floated contents

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

Upvotes: 2

Views: 100

Answers (3)

AzDesign
AzDesign

Reputation: 1199

http://jsfiddle.net/7NQKU/49/ .row is already an inline block, so simply, adding text-align:center; to .page will center .row without changing the rest of the code.

Upvotes: 2

Dan-Nolan
Dan-Nolan

Reputation: 6657

You can center your row inside of your page by adding in this JavaScript where necessary:

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

Since your pictures are re-sizing on toggle you'll have to use this again when they re-size.

Upvotes: 0

Mario Vlad
Mario Vlad

Reputation: 671

The solution is to not use floats to put the images on the same line, but use display: inline-block; and text-align: center; on a block element that is wrapping it.

Here is a fiddle: http://jsfiddle.net/F9Wmg/ Preview: http://fiddle.jshell.net/F9Wmg/show/

The code I added is:

.page {
    text-align: center;
}

.container {
    vertical-align: top;
    float: none;
    display: inline-block;
}

Upvotes: 2

Related Questions