2017-05-06 7 views
0

Ich versuche, zwei divs zentral zu haben, die linke richtet okays aus, die rechte Hand richtet Mitte aus, ich verstehe nicht, warum die rechte Hand so ausgerichtet ist.Div Ausrichtung falsch: Rechts Mitte ausgerichtet

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

Prüfgelände: here

+0

Sie den Boden „Sachen geht hier“ wollen div auf der rechten Seite zu gehen? – Edward

+0

können Sie ein Bild davon zeichnen, wie es aussehen soll? –

+0

@Edward Ja, sollte der zweite Tauchgang auf der rechten Seite sein, idealerweise, wenn ich den Browser schrumpfte, würde es unter dem linken gehen –

Antwort

2

Von dem, was ich in Ihrer Website sehen Sie in diesem div haben:

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

Sie haben ein div mit einem float: left. Sie müssen das zu float ändern: rechts und dann wird die div werden wegen Ihrer Breite zentriert: 700px.

Ändern Sie es in ein breiteres Div und das Div wird nach rechts bewegen.

Um zu sehen, es tatsächlich richtig ist, und nicht zentriert Sie die Breite zu so etwas wie ändern sollte:

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

Wo ist der Schwimmer: links? –

+0

Wenn das übergeordnete div der rechten Spalte 'float: right' angegeben wird, scheint das Problem zu lösen. Aber es hatte nicht "float: left". Es hatte überhaupt keine "float" -Regel. –

+0

@Michael_B und Ziv, die Ihnen danken. Wenn ich den Bildschirm anschaue, bewegt er sich jetzt unter den oberen Block (wahoo), aber zentral ausgerichtet, gibt es eine Möglichkeit, das zu stoppen? –

0

die width: 50% Make für beide Boxen.

Dies ist Ihr Ergebnis:

enter image description here

Verwandte Themen