Question

我期待this之类的东西，但对于多个DIV来说？我上传了一个显示我目前所拥有的内容的页面here。

同样在Dreamweaver上，它会显示每个项目周围有20px的填充，但是在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>

Answer 1

编辑：好的，我在找到你的网络示例后得到了@Jesse。您可以在当前的css规则中添加一些行。

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

我使用每个子元素计算的总宽度为390px，因此我们可以添加边距以分隔每个元素，其中2列将占用所有800px。

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

要将其设为3列，我们需要稍后处理@media screen以检测更改的屏幕，而不是将其与.content-products宽度相匹配。

Answer 2

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

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

在DIV内对齐DIV组中心

2 个答案: