CODEWITHSUNDEEP
htmlcss
Anake.me
Anake.me

Reputation: 467

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>

Upvotes: 0

Views: 211

Answers (2)

Al-Jazary
Al-Jazary

Reputation: 13

EDIT: ok I got it @Jesse after looking for your web example. You can add some line in current css rules.

.content-products {
    .......
    width:800px;
    margin:auto;
}

I count total width using each child element is 390px so we can add margin to separate each of them, with 2 columns will take all 800px.

.product-cell-bg {
    ........
    margin:5px;
}

to make it 3 columns, we need to deal with @media screen later to detect screen changed, than match it with .content-products width.

Upvotes: 1

UncaughtTypeError
UncaughtTypeError

Reputation: 8722

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>

Upvotes: 1

Related Questions