在css中使用寬度和高度屬性時，圖示被向上推的問題？

我是 html css 的新手，這是我的問題，我撰寫了一個非常簡單的 html css 并制作了一個影像，如果你愿意，你可以說它是一個圖示。

我的問題是，它被向上推，而不是像我希望的那樣在中間。

這是我的代碼和圖片供您參考：

#nav {
display: inline-block;
}
#nav>li {
display: inline-block;
}
#nav li {
position: relative;
}
#nav>li>a {
color: #fff;
text-transform: uppercase;
}
#nav li a {
text-decoration: none;
line-height: 46px;
padding: 0 24px;
display: block;
}
.nav_bars-btn {
width: 28px;
height: 28px;
color: #fff;
display: inline-block;
/*display: none;*/
}

<div id="header">
        <ul id="nav">
            <li><a href="#">Home</a></li>
            <li><a href="#band">Bane</a></li>
            <li><a href="#tour">Tour</a></li>
            <li><a href="#contact">Contact</a></li>
            <li>
                <a href="">More
                <i class="nav-arrow-down ti-arrow-circle-down"></i>    
                </a>
                <ul class="subnav">
                    <li><a href="#">Merchandise</a></li>
                    <li><a href="#">Extras</a></li>
                    <li><a href="#">Media</a></li>
                </ul>
            </li>
            <div class="nav_bars-btn">
                <svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="bars" class="svg-inline--fa fa-bars fa-w-14" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="currentColor" d="M16 132h416c8.837 0 16-7.163 16-16V76c0-8.837-7.163-16-16-16H16C7.163 60 0 67.163 0 76v40c0 8.837 7.163 16 16 16zm0 160h416c8.837 0 16-7.163 16-16v-40c0-8.837-7.163-16-16-16H16c-8.837 0-16 7.163-16 16v40c0 8.837 7.163 16 16 16zm0 160h416c8.837 0 16-7.163 16-16v-40c0-8.837-7.163-16-16-16H16c-8.837 0-16 7.163-16 16v40c0 8.837 7.163 16 16 16z"></path></svg>
            </div>
        </ul>
        <div class="search-btn">
            <i class="search-icon ti-search"></i>
        </div>
    </div>

當我padding-top: 10px;將 .nav_bars-btn 中的代碼用于此按鈕的 css 時，它會按下所有 HOME、BANE、TOUR、CONTACT、MORE 欄，我不知道為什么會這樣？

你能幫我如何使按鈕位于中間并告訴我為什么當我使用代碼 padding-top: 10px; 在 .nav_bars-btn 處，它按下了所有“導航”欄。非常感謝您的寶貴時間。

uj5u.com熱心網友回復：

該按鈕是無序串列的一部分，因此當您調整最右側按鈕的內邊距時，您也在調整無序串列及其包含的元素的內邊距。

一種解決方案是將按鈕移到串列之外，然后調整其填充。另一種解決方案是將串列中的所有元素垂直居中：

.vertical-center {
  margin: 0;
  position: absolute;
  top: 50%;
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

<div id="header">
 <div class="vertical-center">
        <ul id="nav">
            <li><a href="#">Home</a></li>
            <li><a href="#band">Bane</a></li>
            <li><a href="#tour">Tour</a></li>
            <li><a href="#contact">Contact</a></li>
            <li>
                <a href="">More
                <i class="nav-arrow-down ti-arrow-circle-down"></i>    
                </a>
                <ul class="subnav">
                    <li><a href="#">Merchandise</a></li>
                    <li><a href="#">Extras</a></li>
                    <li><a href="#">Media</a></li>
                </ul>
            </li>
            <div class="nav_bars-btn">
                <svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="bars" class="svg-inline--fa fa-bars fa-w-14" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="currentColor" d="M16 132h416c8.837 0 16-7.163 16-16V76c0-8.837-7.163-16-16-16H16C7.163 60 0 67.163 0 76v40c0 8.837 7.163 16 16 16zm0 160h416c8.837 0 16-7.163 16-16v-40c0-8.837-7.163-16-16-16H16c-8.837 0-16 7.163-16 16v40c0 8.837 7.163 16 16 16zm0 160h416c8.837 0 16-7.163 16-16v-40c0-8.837-7.163-16-16-16H16c-8.837 0-16 7.163-16 16v40c0 8.837 7.163 16 16 16z"></path></svg>
            </div>
        </ul>
 </div>
        <div class="search-btn">
            <i class="search-icon ti-search"></i>
        </div>
    </div>

uj5u.com熱心網友回復：

inn css，試試flexbox，

#nav{
display: flex;
justify-content: center;
align-items: center;
}

uj5u.com熱心網友回復：

我認為問題在于“更多按鈕”和標題鏈接的大小不同，因此當您嘗試定位它們時它們會相互推動，解決方案是將更多按鈕移出無序串列，然后定位更多按鈕

標籤：html css

上一篇：如何使用TailwindCSS僅在小型設備上將導航欄上的專案居中

下一篇：環繞文本HTMLCSS的問題