Question

我试图集中两个div，左边对齐，右手对齐中间，我不明白右手为什么会这样对齐。

#pageWrapper
{
    /* display: flex; */
    /*justify-content: center;*/
    text-align: left;
    padding: 50px;
    display: inline-block;
}

#navbar
{     
    width: 180px;
    margin-right: 10px;
    opacity: .8;
    display: inline-block;   
}
<div id="pageWrapper">
    <div id="topBar">
    ----- navbar stuff goes in here 
    </div>

    <div style="width: 700px; display: inline-block; margin: 0;">
    ----- topbar goes in here 
    </div>

测试网站：here

Answer 1

从我在你的网站上看到的你在这个div中：

<div style="width: 700px; display: inline-block; margin: 0;">
    ----- topbar goes in here 
</div>

你有一个div float：left。 你需要将其更改为 float：right 然后由于你的宽度，div会看起来居中：700px。

将其更改为更宽的div，div将向右移动。

要查看它实际上是正确的而不是居中，您应该将宽度更改为：

<div style="width: 80%; display: inline-block; margin: 0;">
    ----- topbar goes in here 
</div>

Div对齐错误：右手中间对齐

1 个答案: