按鈕不會徘徊，對齊不居中

Question

我有一個小導航欄，我希望按鈕在這個容器中居中。當我用鼠標輸入時，我也想要一個懸停效果。

不知何故對齊和懸停效果不起作用，我使用flex而不是浮動。所以我想讓按鈕的容器居中，並且按鈕被一個顏色效果徘徊。

謝謝！

這裏有一個小提琴

#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

首先，你需要使用所有的類一類屬性中class="btn navBtn"

併爲中心，你需要在柔性容器

見代碼中使用justify-content:center;柔性物品代碼段：

#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

如果你想傳遞多個類則僅使用單個屬性class="YourClassName"並通過您的類名。

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

使用justify-content: center;居中柔性container.and remeber只使用單一的類屬性的元素內的物品。如果你想使用多級使用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; 
 
    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

對於像這樣的單個元素應該只有一個「class」屬性。

刪除

試試這個：

#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

在.btn:hover你應該寫要出現的變化。此外，您可以使用flexbox顯示屏來證明您的內容正確。

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