Html 如何使用文本垂直图标并使其可链接？_Html_Css

Html 如何使用文本垂直图标并使其可链接？

html css

Html 如何使用文本垂直图标并使其可链接？,html,css,Html,Css,这是我的.html文件 <body> <header> <a href="#"><img src="header_home.png" alt="logo" width="250"></a> <nav> <ul> <li><img src="header_manual.png" alt="logo" width="20">Manuals</li&

这是我的.html文件

<body>
  <header>
    <a href="#"><img src="header_home.png" alt="logo" width="250"></a>
    <nav>
    <ul>
      <li><img src="header_manual.png" alt="logo" width="20">Manuals</li>
      <li><img src="header_news.png" alt="logo" width="20">News</li>
    </ul>
    </nav>
  </header>
</body>

现在，我的每个带有导航标签文本的图标都是内联的。如何使用文本垂直图标并使其可链接？我想要的是上面的图标在每个文本和中间块，然后使它可以链接。

<li><a href="#"><img src="header_manual.png" alt="logo" width="20">Manuals</a></li>

然后将图标和文本居中

header nav img {
    display:block;
    margin:0 auto;
}

小提琴。

html，正文{
身高：100%；
保证金：0；
}
标题{
背景色：黑色；
宽度：100%；
高度：100px；
颜色：红色；
}
标题>一个img{
位置：绝对位置；
顶部：20px；
左：5px；
}
标题导航{
宽度：60%；
高度：100px；
边框：红色1px实心；
保证金：0自动；
文本对齐：居中；
}
标题导航ul{
左侧填充：0；
保证金：0；
}
标题nav ul li{
浮动：左；
高度：100px；
列表样式：无；
宽度：150px；
文本对齐：居中；
}
导航李img{
显示：块；
利润率：20px自动0；
}

使用

:before

或

:before

html，正文{
身高：100%；
保证金：0；
}
标题{
背景色：黑色；
宽度：100%；
高度：100px；
颜色：红色；
}
标题>a>img{
位置：绝对位置；
顶部：20px；
左：5px；
}
标题导航{
宽度：60%；
高度：100px；
边框：红色1px实心；
保证金：0自动；
文本对齐：居中；
}
标题导航ul{
左侧填充：0；
}
标题nav ul li{
显示：内联块；
垂直对齐：顶部；
高度：100px；
宽度：150px；
}
标题nav ul li a{
显示：块；
颜色：#fff；
文字装饰：无；
位置：相对位置；
}
标题nav ul li a：之前{
内容：''；
显示：块；
宽度：16px；
高度：16px；
保证金：0自动5px自动；
背景：#f00；
}
收割台导航ul li:第n个子（1）a:之前{
背景：#ccc url（'header_manual.png'）不重复0；
}
收割台导航ul li:第n个子（2）a:之前{
背景：#00f url（'header_news.png'）不重复0；
}
收割台导航ul li a：悬停{
颜色：#f00；
}
收割台导航ul li a:悬停：之前{
背景：#f00；
}

是否希望图标位于垂直列表中每个项目的文本上方？是的。很抱歉，解释不正确。

header > a > img {
 position: absolute;
 top: 20px;
 left: 5px;
}

header nav img {
    display:block;
    margin:0 auto;
}