homepage Welcome to WebmasterWorld Guest from 54.225.1.70
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor 2014
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderator: open

CSS Forum

    
How to center 3 divs inside a parent div?
text-align: center; does not work
jack38




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

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>

 

swa66




msg:4640494
 11:26 am on Jan 27, 2014 (gmt 0)

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 ?

jack38




msg:4640510
 1:06 pm on Jan 27, 2014 (gmt 0)

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?

swa66




msg:4640575
 9:41 pm on Jan 27, 2014 (gmt 0)

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.

isrphp




msg:4640720
 11:28 am on Jan 28, 2014 (gmt 0)

By giving margin: 0 auto; inside the parent div

swa66




msg:4640739
 1:44 pm on Jan 28, 2014 (gmt 0)

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).
abiabiah




msg:4669170
 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>

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved