html - 在 DIV 内对齐 DIV 组居中

我正在寻找类似 this 的东西但对于多个 DIV？我已经上传了一个页面，显示了我目前拥有的内容，可以找到 here .

同样在 Dreamweaver 上，它显示每个元素周围有 20 像素的填充，但是在 Google Chrome 上它显示不一样。我不确定这是为什么？

结论:

寻找一种使 DIV 在 DIV 中居中的方法。 (即使页面宽度发生变化。)
找出为什么元素没有像我在 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>

最佳答案

听起来您需要将嵌套的 div 组显示为内联元素，然后在父 div 上声明 text-align: center > 元素。

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

关于html - 在 DIV 内对齐 DIV 组居中，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37905103/

html - 在 DIV 内对齐 DIV 组居中

上一篇：html - `margin: 0;` 不适用于子 div

下一篇：html css 下拉菜单不起作用