Question

以下是我标题内导航的代码。无论我尝试什么，图像都拒绝让步。我需要图像垂直对齐它旁边的按钮中的文本。我尝试过显示：table-cell但也许我错误地放置了它。

<nav id="headerNav">
<ul>
    <li>
        <a href = "#" id="logoLink" style="padding-top:15px">
            <img src="images/Logo.png" />
        </a>
    </li>
    <li>
        <a href = "#" id="logoHeader" style="padding-left:0px; margin-right:15%;">
            Something
        </a>
    </li>
    <li><a href="#">About</a></li>
    <li><a href="#">...</a></li>
    <li><a href="#">Support</a></li>
    <li><a href="#">Case Studies</a></li>
    <li><a href="#">Contact Us</a></li>
</ul>

CSS： -

#headerNav
{
margin-top:2%;
margin-bottom:1%;
padding-bottom:2%;


}
header nav ul {

margin:1em 0;
padding:0;
width:100%;

}

header nav ul li
{
display:inline;
list-style-type:none;

}
header nav ul li a img
{
    width:auto;
height:auto;
max-height:100%;
max-width:100%;

}

header nav ul li a {

 font-family:'OpenSansReg', sans-serif;
color:#4D4D4D;
font-size:1.0em;
font-weight:400;
padding:1.7%;
text-decoration:none;
background-color:white;


}

Answer 1

请检查更新您的html / css代码，如下所述：

从<a href = "#" id="logoLink" style="padding-top:15px">移除填充顶部的内联样式，并将其设为：<a href = "#" id="logoLink">
将以下css属性添加到您的#headerNav ul li a（在您上面的代码中提到为header nav ul li a）类：

display: inline-block; vertical-align: middle;

希望它会对你有所帮助！

我的图像图标拒绝在锚标记内对齐中心或移位

1 个答案: