如何垂直對齊水平內的img

我的網站導航工作正常，但是，我們決定將標誌放在它的中間，現在我無法垂直對齊，我嘗試使用line-height但它並沒有成功。如何垂直對齊水平內的img

我把代碼放在代碼片段中，有人能幫我一下嗎？

nav > ul > li > a > img { 
 
    width: 60px; 
 
    } 
 

 
nav > ul { 
 
    list-style: none; 
 
    } 
 

 
nav > ul > li { 
 
    display: inline-block; 
 
    } 
 

 
nav > ul > li > a { 
 
    text-decoration: none; 
 
    color: black; 
 
    }

<nav> 
 
    <ul> 
 
    <li><a href="#">Shop</a></li> 
 
    <li><a href="#">Shop</a></li> 
 
    <li><a href="#"><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/32/Wi-Fi_Logo.svg/1280px-Wi-Fi_Logo.svg.png" alt="logo"/></a></li> 
 
    <li><a href="#">Shop</a></li> 
 
    <li><a href="#">Shop</a></li> 
 
    </ul> 
 
</nav>

來源

2016-04-07 Thassio Paganucci Xavier

你想如何對齊項目？垂直居中？ – showdev

我想將文本放在與「wifi」文本相同的行中。 –

inline-block默認爲vertical-align:baseline因此它設置爲middle，

相同的規則img，所以如果你不希望應用到li可以應用到img代替

nav > ul > li > a > img { 
 
    width: 60px; 
 
    /*vertical-align:middle - this would work here by itself too */ 
 
} 
 
nav > ul { 
 
    list-style: none; 
 
} 
 
nav > ul > li { 
 
    display: inline-block; 
 
    vertical-align: middle 
 
} 
 
nav > ul > li > a { 
 
    text-decoration: none; 
 
    color: black; 
 
}

<nav> 
 
    <ul> 
 
    <li><a href="#">Shop</a> 
 
    </li> 
 
    <li><a href="#">Shop</a> 
 
    </li> 
 
    <li> 
 
     <a href="#"> 
 
     <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/32/Wi-Fi_Logo.svg/1280px-Wi-Fi_Logo.svg.png" alt="logo" /> 
 
     </a> 
 
    </li> 
 
    <li><a href="#">Shop</a> 
 
    </li> 
 
    <li><a href="#">Shop</a> 
 
    </li> 
 
    </ul> 
 
</nav>

來源

2016-04-07 16:38:16 dippas

非常感謝dippas，它的工作原理！ –

不客氣'：）' – dippas

只是垂直對齊的圖像，使用vertical-align財產。

你想要的值很可能是middle。

nav > ul > li > a > img { 
 
    width: 60px; 
 
    vertical-align:middle; 
 
    } 
 

 
nav > ul { 
 
    list-style: none; 
 
    } 
 

 
nav > ul > li { 
 
    display: inline-block; 
 
    } 
 

 
nav > ul > li > a { 
 
    text-decoration: none; 
 
    color: black; 
 
    }

<nav> 
 
    <ul> 
 
    <li><a href="#">Shop</a></li> 
 
    <li><a href="#">Shop</a></li> 
 
    <li><a href="#"><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/32/Wi-Fi_Logo.svg/1280px-Wi-Fi_Logo.svg.png" alt="logo"/></a></li> 
 
    <li><a href="#">Shop</a></li> 
 
    <li><a href="#">Shop</a></li> 
 
    </ul> 
 
</nav>

來源

2016-04-07 16:37:50 CBroe

如何垂直對齊水平內的img

回答

相關問題