Question

<h3 style="text-align: center">NOT THIS</h3>
<div style="text-align: center;">
  <div style="background-color: brown; width: 200px; height: 10px; display: block; margin: auto;"></div>
  <div style="background-color: grey; width: 100px; height: 50px; display: inline-block; margin-right: -4px;"></div>
  <div style="background-color: grey; width: 100px; height: 50px; display: inline-block;"></div>
</div>

<br>

<h3 style="text-align: center">BUT LIKE THIS</h3>
<div style="background-color: brown; width: 200px; height: 10px; display: block; margin: auto;"></div>
<div style="margin: auto; background-color: grey; width: 200px; height: 50px;"></div>

请在JSFiddle：https://jsfiddle.net/17h1oj3e/

上观看示例

当我调整浏览器宽度时，第一部分代码的2个div正在重新定位。

你知道如何在中心对齐和自动保证金的前两个div上获得相同的第二部分结果吗？

非常感谢

Answer 1

父母div上的white-space: nowrap。

＆＃13;

<div style="text-align: center; white-space:nowrap;">
  <div style="background-color: brown; width: 200px; height: 10px; display: block; margin: auto;"></div>
  <div style="background-color: grey; width: 100px; height: 50px; display: inline-block; margin-right: -4px;"></div>
  <div style="background-color: grey; width: 100px; height: 50px; display: inline-block;"></div>
</div>

＆＃13;

Answer 2

Dunno如果这有帮助，但你可以使用flexbox。

<强> CSS

<style>
    .flexbox{
        display: flex;
        flex-direction: column;
        font-size: 16px;
        max-width: 1200px;
        margin: 0 auto;
        width: 100%;
    }
    .bar{
        background: brown;
        height: 10px;
    }
    .half{
        background: grey;
        padding: 3rem;
        width: 100%;
    }
    .half:last-of-type{
        background: lightgrey;
    }
    .flexbox-nowrap{
        display: flex;
        flex-wrap: nowrap;
    }
</style>

<强> HTML

<div class="flexbox">
    <div class="bar"></div>
    <div class="flexbox-nowrap">
        <div class="half">hello</div>
        <div class="half">world</div>
    </div>
</div>

此外，此代码具有响应性，因此适用于所有显示尺寸

Answer 3

<div style="display: block; margin: auto; background: brown; width: 200px; height: 10px;" class="bar"></div>
<div style="display: block; margin: auto; background: grey; width: 200px; height: 100px;" class="firstElement">
    <div style="background: grey; width: 100px; height: 100px" class="secondElement"></div>
</div>

预览：https://jsfiddle.net/3fkbwasg/

非常感谢！

浏览器调整大小时，Div不会重新定位

3 个答案: