Center div without negative margins

HTML & CSS
1

Hi all

I have a jsfiddle here - http://jsfiddle.net/apej60nL/

I have two columns in bootstrap.

One column has text as content the other is empty apart from a yellow div that is repersenting an image.

I need to center the yellow div vertically against the text block.

To do this I need to make the left div containing the yellow div tha same height as the text div.

I have done this with


	.test .row {
	    display: table;
	}

	.left, .right {
	    float: none;
	    display: table-cell;
	    vertical-align: top;
	}

I positioned the yellow div absolutely and used negative margins to center it.

I can do this because i know the width/height of the yellow div.

I need to do this without knowing the width/height.

The image/div could be different dimensions.

How can I center it vertically with knowing the size.

2

Something like this?


<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/stylesheet.css">
    <title>template</title>
<!--
http://www.sitepoint.com/forums/showthread.php?1230304-Center-div-without-negative-margins
2014.08.26 14:56
ttmt
-->
    <style type="text/css">
.test .row {
    max-width:960px;
    display:table;
    table-layout:fixed;
    margin:0 auto;
}
.left, .right {
    width:50%;
    display:table-cell;
    vertical-align:middle;
}
.left {
    background:red;
    text-align:center;
}
.right {
    background:#ddd;    
}
    </style>
</head>
<body>

<div class="container test">
    <div class="row">
        <div class="col-xs-6 left">
            <img src="http://placehold.it/60x60/ffff00" alt="">
        </div>
        <div class="col-xs-6 right">
            <p>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident,
                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, uptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident,
            </p>
        </div>
    </div>
</div>

</body>
</html>

FYI: one cannot use positioned elements inside table-cells. I have no idea why that fiddle appears to work. :slight_smile:

3

Erratum:

<!doctype html> should appear as the top line above the code in the previous post. (Sorry, careless copy-n-paste.)

4

FYI: one cannot use positioned elements inside table-cells. I have no idea why that fiddle appears to work. :slight_smile:

I believe that from Firefox 36 this is now working so IE chrome and Firefox will absolutely position based from a cell with relative position. It may still be undefined in the specs though.

5

I have a feeling that there is more code in play than that which I see; media queries, perhaps. The OP’s code is insufficient to generate the image that jsfiddle is rendering. There are no widths.

6

Ron the grid is controlled with the bootstrap files which you can see are linked to in external resources. Those fiddles are always a little confusing and indeed I find them an awkward way to debug because the setup gets in the way of the inspector.

7

Ah, HA!

I pasted the OP’s code into your Bootstrap template page and now I get the picture.

I will pay attention to jsfiddle’s “external resources” tab in the future.

Thanks, Paul.

8