Ausrichtung der div Elemente in der Mitte und rechts

Question

Ich habe vier Registerkarten mit HTML5/CSS3/JS entwickelt, die unten gezeigt werden.

Ich habe display:inline-block; für Reiter divs und text-align:center für ihre Mutter div verwendet, um alle vier Registerkarten in der Mitte der Seite zu finden.

<div class='parent'> 
    <div class='tabItem'>YOU</div> 
    <div class='tabItem'>DATABASE</div> 
    <div class='tabItem'>TASKS</div> 
    <div class='tabItem'>HELP</div> 
</div> 

CSS3:

.parent{text-align:center;} 
.tabItem{display:inline-block;} 

Jetzt möchte ich zwei der Registerkarten zu lokalisieren, dh SIE und HELP auf der rechten Seite der Seite, und der Rest der Registerkarten dh DATABASE und AUFGABEN bei der Zentrum der Seite. Ich frage mich, wie ich das machen kann.

Es wird bevorzugt, dass div-Elemente dem natürlichen Fluss der Seite folgen.

Answer 1

Hier ist Ihre Lösung!

.parent{text-align:center;} 
 
.tabItem{display:inline-block;} 
 
.right { 
 
float: right; 
 
}

<div class='parent center'> 
 
    <div class='tabItem'>DATABASE</div> 
 
    <div class='tabItem'>TASKS</div> 
 
     <div class='parent right'> 
 
     <div class='tabItem'>YOU</div> 
 
     <div class='tabItem'>HELP</div> 
 
     </div> 
 
</div>

Answer 2

hoffe, das hilft !!

Oder einfach diese zwei divs in einen übergeordneten Container und geben Sie ihm eine ID = "richtig", um zu vermeiden ID zu wiederholen !!

Answer 3

Sie so etwas wie dieses

.parent{text-align:center;} 
 
.tabItem{display:inline-block;} 
 
.right{float:right;} 
 
.left{float:left;}

<div class='parent'> 
 
    <div class='tabItem left'>Content for Left</div> 
 
    <div class='tabItem'>DATABASE</div> 
 
    <div class='tabItem'>TASKS</div> 
 
    <div class='tabItem right'>YOU</div> 
 
    <div class='tabItem right'>HELP</div> 
 
</div>

Answer 4

Ich denke, Sie werden die Registerkarten festlegen müssen Sie müssen absolute Position verlagern, so dass sie aus dem normalen Gehalt Fluss sein, dann Sie können die anderen beiden Tabs wirklich zentrieren.

.parent { 
 
    background: pink; 
 
    text-align: center; 
 
    position: relative; 
 
} 
 
.tabItem { 
 
    margin: 0 5px; 
 
    display: inline-block; 
 
    background: aqua; 
 
} 
 
.tabItem:nth-child(1) { 
 
    position: absolute; 
 
    right: 50px; /* width of "HELP" tab */ 
 
} 
 
.tabItem:nth-child(4) { 
 
    position: absolute; 
 
    right: 0; 
 
}

<div class='parent'> 
 
    <div class='tabItem'>YOU</div> 
 
    <div class='tabItem'>DATABASE</div> 
 
    <div class='tabItem'>TASKS</div> 
 
    <div class='tabItem'>HELP</div> 
 
</div>

Answer 5

CSS3 Funktion display:flex ist eine zu Option. Kann damit herumspielen, um zu sehen, ob es funktionieren würde.

.parent{ 
 
    display:flex; 
 
    justify-content:center; 
 
} 
 

 
.item{ 
 
    padding: 10px; 
 
    text-transform:uppercase; 
 
} 
 

 
.right{ 
 
    margin-left:auto; 
 
} 
 

 
.left{ 
 
    margin-right:auto; 
 
}

<div class="parent"> 
 
    <div class="item left">you</div> 
 
    <div class="item">database</div> 
 
    <div class="item">tasks</div> 
 
    <div class="item right">help</div> 
 
</div>