Schaltfläche wird nicht verschoben und die Ausrichtung ist nicht zentriert

Question

Ich habe eine kleine Navigationsleiste und ich möchte die Schaltflächen in diesem Container zentriert werden. Ich möchte auch einen Hover-Effekt, wenn ich sie mit der Maus betrete.

Irgendwie funktioniert der Alignment- und Hover-Effekt nicht, ich benutze flex statt floating. Ich möchte also, dass der Container der Buttons zentriert ist und die Buttons mit einem Farbeffekt gehalten werden.

Danke!

Hier ist eine Geige

#navBar { 
 
    height: 100%; 
 
    width: 300px; 
 
    color: #000000; 
 
    background-color: #dddddd; 
 
} 
 

 
#btnBar { 
 
    display: flex; 
 
    align-items: center; 
 
    height: 40px; 
 
    margin: auto; 
 
    background-color: #f85d4d; 
 
    color: #ffffff; 
 
} 
 

 
.navBtn:hover { 
 
    color: #cccccc; 
 
} 
 

 
.btn { 
 
    cursor: pointer; 
 
    font-weight: bold; 
 
    border: none; 
 
    padding: 5px 10px 5px 10px; 
 
    margin: 0px 1px 0px 1px; 
 
    color: inherit; 
 
    background-color: inherit; 
 
    transition: 0.5s; 
 
} 
 

 
.btn:hover { 
 
    transition: 0.5s; 
 
} 
 

 
.btn:focus { 
 
    outline: none; 
 
}

<div id="navBar"> 
 
     <div id="btnBar"> 
 
     <button class="btn" class="navBtn">New Folder</button> 
 
     <button class="btn" class="navBtn">New File</button> 
 
     <button class="btn" class="navBtn">Delete</button> 
 
     </div> 
 
     <div> 
 
     navContent 
 
     </div> 
 
    </div>

Answer 1

Zuerst müssen Sie innerhalb einer Klasse Attribut alle Klassen verwenden class="btn navBtn"

und einem Biege Artikel zum Zentrieren Sie müssen justify-content:center; auf flex Behälter verwenden

Siehe Code Schnipsel:

#navBar { 
 
    height: 100%; 
 
    width: 300px; 
 
    color: #000000; 
 
    background-color: #dddddd; 
 
} 
 

 
#btnBar { 
 
    display: flex; 
 
    align-items: center; 
 
    justify-content:center; 
 
    height: 40px; 
 
    margin: auto; 
 
    background-color: #f85d4d; 
 
    color: #ffffff; 
 
} 
 

 
.navBtn:hover { 
 
    color: #cccccc; 
 
} 
 

 
.btn { 
 
    cursor: pointer; 
 
    font-weight: bold; 
 
    border: none; 
 
    padding: 5px 10px 5px 10px; 
 
    margin: 0px 1px 0px 1px; 
 
    color: inherit; 
 
    background-color: inherit; 
 
    transition: 0.5s; 
 
} 
 

 
.btn:hover { 
 
    transition: 0.5s; 
 
} 
 

 
.btn:focus { 
 
    outline: none; 
 
}

<div id="navBar"> 
 
    <div id="btnBar"> 
 
    <button class="btn navBtn">New Folder</button> 
 
    <button class="btn navBtn">New File</button> 
 
    <button class="btn navBtn">Delete</button> 
 
    </div> 
 
    <div> 
 
    navContent 
 
    </div> 
 
</div>

Answer 2

Wenn Sie mehrere Klassen verwenden, um übergeben wollen, dann nur einzelne Attribut class="YourClassName" und Ihre Klassennamen übergeben.

class="btn" class="navBtn" This is wrong. Do somthing like class="btn navBtn"

#navBar { 
 
    height: 100%; 
 
    width: 300px; 
 
    color: #000000; 
 
    background-color: #dddddd; 
 
} 
 

 
#btnBar { 
 
    display: flex; 
 
    align-items: center; 
 
    height: 40px; 
 
    margin: auto; 
 
    background-color: #f85d4d; 
 
    color: #ffffff; 
 
} 
 

 
.navBtn:hover { 
 
    color: #cccccc; 
 
} 
 

 
.btn { 
 
    cursor: pointer; 
 
    font-weight: bold; 
 
    border: none; 
 
    padding: 5px 10px 5px 10px; 
 
    margin: 0px 1px 0px 1px; 
 
    color: inherit; 
 
    background-color: inherit; 
 
    transition: 0.5s; 
 
} 
 

 
.btn:hover { 
 
    transition: 0.5s; 
 
} 
 

 
.btn:focus { 
 
    outline: none; 
 
}

<div id="navBar"> 
 
     <div id="btnBar"> 
 
     <button class="btn navBtn">New Folder</button> 
 
     <button class="btn navBtn">New File</button> 
 
     <button class="btn navBtn">Delete</button> 
 
     </div> 
 
     <div> 
 
     navContent 
 
     </div> 
 
    </div>

Answer 3

Verwenden justify-content: center; zum Zentrum Elemente innerhalb der Flex container.and remeber Verwendung nur einzelne Klassenattribut für das Element Wenn Sie mehrere Klassen Verwendung class="btn navBtn"

verwenden möchten

#navBar { 
 
    height: 100%; 
 
    width: 300px; 
 
    color: #000000; 
 
    background-color: #dddddd; 
 
} 
 

 
#btnBar { 
 
    display: flex; 
 
    align-items: center; 
 
    height: 40px; 
 
    margin: auto; 
 
    background-color: #f85d4d; 
 
    color: #ffffff; 
 
    justify-content: center; 
 
} 
 

 
.navBtn:hover { 
 
    color: #cccccc; 
 
} 
 

 
.btn { 
 
    cursor: pointer; 
 
    font-weight: bold; 
 
    border: none; 
 
    padding: 5px 10px 5px 10px; 
 
    margin: 0px 1px 0px 1px; 
 
    color: inherit; 
 
    background-color: inherit; 
 
    transition:all 0.5s linear; 
 
} 
 

 

 

 
.btn:focus { 
 
    outline: none; 
 
}

<div id="navBar"> 
 
     <div id="btnBar"> 
 
     <button class="btn navBtn">New Folder</button> 
 
     <button class="btn navBtn" >New File</button> 
 
     <button class="btn navBtn" >Delete</button> 
 
     </div> 
 
     <div> 
 
     navContent 
 
     </div> 
 
    </div>

Answer 4

Es sollte nur ein Attribut "Klasse" für ein einzelnes Element wie dieses geben.

löschen

Try this:

#navBar { 
 
    height: 100%; 
 
    width: 300px; 
 
    color: #000000; 
 
    background-color: #dddddd; 
 
} 
 

 
#btnBar { 
 
    display: flex; 
 
    align-items: center; 
 
    height: 40px; 
 
    margin: auto; 
 
    background-color: #f85d4d; 
 
    color: #ffffff; 
 
} 
 

 
.navBtn:hover { 
 
    color: #cccccc; 
 
} 
 

 
.btn { 
 
    cursor: pointer; 
 
    font-weight: bold; 
 
    border: none; 
 
    padding: 5px 10px 5px 10px; 
 
    margin: 0px 1px 0px 1px; 
 
    color: inherit; 
 
    background-color: inherit; 
 
    transition: 0.5s; 
 
} 
 

 
.btn:hover { 
 
    transition: 0.5s; 
 
} 
 

 
.btn:focus { 
 
    outline: none; 
 
}

<div id="navBar"> 
 
     <div id="btnBar"> 
 
     <button class="btn navBtn">New Folder</button> 
 
     <button class="btn navBtn">New File</button> 
 
     <button class="btn navBtn">Delete</button> 
 
     </div> 
 
     <div> 
 
     navContent 
 
     </div> 
 
    </div>

Answer 5

In .btn:hover Sie Änderungen schreiben sollten Sie erscheinen soll. Sie können auch flexbox Display verwenden, um Ihre Inhalte zu rechtfertigen.

#navBar { 
 
    height: 100px; 
 
    width: 100%; 
 
    color: #000000; 
 
    background-color: #dddddd; 
 
    display: flex; 
 
    justify-content: center; 
 
    align-items: center; 
 
    flex-direction: column; 
 
} 
 

 
#btnBar { 
 
    height: 40px; 
 
    background-color: #f85d4d; 
 
    color: #ffffff; 
 
} 
 

 
.navBtn:hover { 
 
    color: #cccccc; 
 
} 
 

 
.btn { 
 
    cursor: pointer; 
 
    font-weight: bold; 
 
    border: none; 
 
    padding: 5px 10px 5px 10px; 
 
    margin: 0px 1px 0px 1px; 
 
    color: inherit; 
 
    background-color: inherit; 
 
    transition: 0.5s; 
 
} 
 

 
.btn:hover { 
 
    color: blue; 
 
} 
 

 
.btn:focus { 
 
    outline: none; 
 
}

<div id="navBar"> 
 
     <div id="btnBar"> 
 
     <button class="btn" class="navBtn">New Folder</button> 
 
     <button class="btn" class="navBtn">New File</button> 
 
     <button class="btn" class="navBtn">Delete</button> 
 
     </div> 
 
     <div> 
 
     <p>navContent<p> 
 
     </div> 
 
    </div>