Welcome to WebmasterWorld Guest from 54.205.251.179

Forum Moderators: not2easy

Message Too Old, No Replies

How to center 3 divs inside a parent div?

text-align: center; does not work

   
9:32 am on Jan 27, 2014 (gmt 0)

5+ Year Member



I want to center 3 divs, each containing an image and description, within a container parent div. How can I do it?

The code below will not center the 3 divs. They end up left aligned.

Here is the code:

<!DOCTYPE html>
<html>
<head>
<style>
.parent {
margin-left: auto;
margin-right: auto;
width: 1000px;
text-align: center;
}
div.img
{
margin: 5px;
padding: 5px;
border: 1px solid #0000ff;
height: auto;
width: auto;
float: left;
text-align: center;
}
div.desc
{
text-align: center;
font-weight: normal;
width: 120px;
margin: 5px;
}
</style>
</head>
<body>
<div class="parent">
<div class="img"> <img src="image1.jpg">
<div class="desc">Add a description of the image here</div>
</div>
<div class="img"> <img src="image2.jpg">
<div class="desc">Add a description of the image here</div>
</div>
<div class="img"> <img src="image3.jpg">
<div class="desc">Add a description of the image here</div>
</div>
</div>
</body>
</html>
11:26 am on Jan 27, 2014 (gmt 0)

WebmasterWorld Senior Member swa66 is a WebmasterWorld Top Contributor of All Time 10+ Year Member



The moment you set "float:left;" on div.img class you lost.

The trick is to not float content when there's no need.
display:inline-block is all you'd need to get the desired result.

You the use text-align:center on the parten (all the others are not needed), also the default is to have auto on height and width, no need to set it unless you're aiming to overrule using specificity or so.

So, this does it for me:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style>
.parent {
margin-left: auto;
margin-right: auto;
width: 1000px;
text-align: center;
}
div.img {
margin: 5px;
padding: 5px;
border: 1px solid #0000ff;
display:inline-block;
}
div.desc {
font-weight: normal;
width: 120px;
margin: 5px;
}
</style>
<title>test</title>
</head>
<body>
<div class="parent">
<div class="img">
<img src="image1.jpg" alt="" />
<div class="desc">Add a description of the image here</div>
</div>
<div class="img">
<img src="image2.jpg" alt="" />
<div class="desc">Add a description of the image here</div>
</div>
<div class="img">
<img src="image3.jpg" alt="" />
<div class="desc">Add a description of the image here</div>
</div>
</div>
</body>
</html>

(also validates)

Only looked at it in a modern browser - obsolete versions of IE will have trouble with this - but they're not in use anymore are they ?
1:06 pm on Jan 27, 2014 (gmt 0)

5+ Year Member



Thank you, this works.

I also found a workaround by using absolute position, changing the .parent to:

.parent {
text-align: center;
position: absolute;
left: 300px;
}

Which method would you use? which is better?
9:41 pm on Jan 27, 2014 (gmt 0)

WebmasterWorld Senior Member swa66 is a WebmasterWorld Top Contributor of All Time 10+ Year Member



Better is hard to say, absolute positioning has drawbacks such as needing to know the size of what you position. There's easier tricks to center than that btw.

The thing when you make it inline blocks is that the browser will infer spaces between the "words" and you'll have great trouble if you need pixel perfect positioning.

All in all you have a choice of methods to work with. none is going to be globally better - it depends on the situation which I'd use.
11:28 am on Jan 28, 2014 (gmt 0)



By giving margin: 0 auto; inside the parent div
1:44 pm on Jan 28, 2014 (gmt 0)

WebmasterWorld Senior Member swa66 is a WebmasterWorld Top Contributor of All Time 10+ Year Member



margin: 0 auto;
used for centering only works on blocks that have a defined width (otherwise the margins will both default to 0 and the item will take up all the space).
9:00 am on May 7, 2014 (gmt 0)



#container-div {
float:left;
width:100%
}

.image-1 {
float:left;
margin: 0 auto;
width: 33.333%;
}

.image-2 {
float:left;
margin: 0 auto;
width: 33.333%;
}

.image-3 {
float:left;
margin: 0 auto;
width: 33.333%;
}

<div id="#container-div">
<div class="image-1"><img src=""></div>
<div class="image-2"><img src=""></div>
<div class="image-3"><img src=""></div>
</div>