Div對齊錯誤：右手中間對齊

我想要有兩個div的集中，左對齊好吧，右手對齊中間，我不明白爲什麼右手對齊像這樣。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

來源

2017-05-06 Paul Morriss

你想下方的「東西放在這裏」格去了吧？ – Edward

你能畫一幅你想要的樣子嗎？ –

@愛德華是的，第二次潛水應該是正確的，理想情況下，如果我縮小了瀏覽器，它會在左邊下一個 –

從我在你的網站看你有沒有在這個div：

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

你有一個浮動一個div：離開了。您需要將其更改爲float：right然後div會看起來居中，因爲您的寬度爲：700px。

將其更改爲更寬的div，div將移動到右側。

要看到它實際上是正確的，而不是中心，你應該寬度更改爲類似：

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

來源

2017-05-06 22:07:20

float：left？ –

給出右列「float：right」的父div似乎可以解決問題。但它沒有'float：left'。它根本沒有「浮動」規則。 –

@Michael_B和Ziv，謝謝你。如果我使屏幕閃爍，它現在移動到頂部的塊（wahoo）下面，但居中對齊，是否有辦法阻止它？ –

充分利用width: 50%兩個盒子。

這是你的結果：

來源

2017-05-06 22:29:01 Edward

Div對齊錯誤：右手中間對齊

回答

相關問題