Jesse Jesse - 4 months ago 9
CSS Question

Align Group Of DIVs Center Inside a DIV

I am looking to something like this but for multiple DIV's? I have uploaded a page showing what I currently have which can be found here.

Also on Dreamweaver it displays each item as having a 20px padding around them, however on Google Chrome it does not display the same. I'm unsure why that is?

Conclusion:


  1. Looking for a way to center DIV's inside a DIV. (Even when page width changes.)

  2. To find out why the items do not display as I have created them to in Dreamweaver.



HTML:

<html>
<head>
<title>HELP</title>
<link rel="stylesheet" href="../_scripts/stylesheet.css" />
<link rel="stylesheet" href="../_scripts/stylesheet_divs.css" />
<link rel="stylesheet" href="../_scripts/stylesheet_header.css" />
<link rel="stylesheet" href="../_scripts/stylesheet_content.css" />
<link rel="stylesheet" href="../_scripts/stylesheet_footer.css" />
</head>
<body>
<div class="background-image-1">
<div align="justify" class="content-products">
<div class="product-cell-bg padding-20">
<div class="float-left product-cell"><img src="../_assets/fender.png" width="150" height="150"></div>
<div class="float-left product-cell">Fenders</div>
</div>
<div class="product-cell-bg padding-20">
<div class="float-left product-cell"><img src="../_assets/fender.png" width="150" height="150"></div>
<div class="float-left product-cell">Fenders</div>
</div>
<div class="product-cell-bg padding-20">
<div class="float-left product-cell"><img src="../_assets/fender.png" width="150" height="150"></div>
<div class="float-left product-cell">Fenders</div>
</div>
<div class="product-cell-bg padding-20">
<div class="float-left product-cell"><img src="../_assets/fender.png" width="150" height="150"></div>
<div class="float-left product-cell">Fenders</div>
</div>
<div class="product-cell-bg padding-20">
<div class="float-left product-cell"><img src="../_assets/fender.png" width="150" height="150"></div>
<div class="float-left product-cell">Fenders</div>
</div>
<div class="product-cell-bg padding-20">
<div class="float-left product-cell"><img src="../_assets/fender.png" width="150" height="150"></div>
<div class="float-left product-cell">Fenders</div>
</div>
<div class="product-cell-bg padding-20">
<div class="float-left product-cell"><img src="../_assets/fender.png" width="150" height="150"></div>
<div class="float-left product-cell">Fenders</div>
</div>
<div class="product-cell-bg padding-20">
<div class="float-left product-cell"><img src="../_assets/fender.png" width="150" height="150"></div>
<div class="float-left product-cell">Fenders</div>
</div>
<div class="product-cell-bg padding-20">
<div class="float-left product-cell"><img src="../_assets/fender.png" width="150" height="150"></div>
<div class="float-left product-cell">Fenders</div>
</div>
<div class="product-cell-bg padding-20">
<div class="float-left product-cell"><img src="../_assets/fender.png" width="150" height="150"></div>
<div class="float-left product-cell">Fenders</div>
</div>
</div>
</div>
</body>
</html>

Answer

Sounds like you need to display your group of nested divs as inline elements, then declare text-align: center on the parent div element.

.child {
    min-height: 50px;
    min-width: 250px;
    display: inline-block;
    background: #d2d2d2;
    padding: 10px;
    box-sizing: border-box;
    margin-top: 10px;
}

.parent {
    text-align: center;
}
<div class="parent">
  <div class="child">Child element</div>
  <div class="child">Child element</div>
  <div class="child">Child element</div>
  <div class="child">Child element</div>
  <div class="child">Child element</div>
</div>