homepage Welcome to WebmasterWorld Guest from 23.22.173.58
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

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

5+ Year Member



 
Msg#: 4640467 posted 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

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



 
Msg#: 4640467 posted 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

5+ Year Member



 
Msg#: 4640467 posted 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

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



 
Msg#: 4640467 posted 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#: 4640467 posted 11:28 am on Jan 28, 2014 (gmt 0)

By giving margin: 0 auto; inside the parent div

swa66

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



 
Msg#: 4640467 posted 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#: 4640467 posted 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