How to center 3 divs inside a parent div?

Forum Moderators: not2easy

Message Too Old, No Replies

How to center 3 divs inside a parent div?

text-align: center; does not work

jack38

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

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

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

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

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

By giving margin: 0 auto; inside the parent div

swa66

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

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>