我正在开发一个网站元素，在该元素中，我必须在菜单中垂直对齐包含两部分的链接:一张图片和一段描述。目的是这样的:
但我只能这样做:
li {
display: inline;
margin-right: 10px;
}
a.itens:link {
color: #000;
text-decoration: none;
}
a.itens:visited {
color: #000;
}
.menu {
border: 5px solid #EC771A;
font-size: 20;
font-family: Oxygen;
height: 52px;
width: 909px;
}
ul {
margin-top: 4px;
margin-bottom: 0px;
}
div.4 {
width: 168px;
height: 52px;
}
div.ljuntesse {
width: 28px;
height: 52px;
}
div.tjuntesse {
width: 140px;
height: 52px;
}
.ljuntesse, tjuntesse {
display: inline;
}
li.5 {
padding-bottom: 17px;
}
.lampada {
display: inline;
width: 25px;
height: 41px;
}<html>
<head>
<link type="text/css" rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="menu">
<ul>
<b>
<li><a class="itens" href=#menu>Home</a></li>
<li><a class="itens" href=#Projetos><img class="lampada" src="images/parceiros.png">Parceiros</a></li>
<li><a class="itens" href=#LinksUteis><img class="lampada" src="images/links.png">Links Uteis</a> </li>
<div class="4">
<a class="itens" href=#Blog>
<div class="ljuntesse">
<img class="lampada" src="images/juntesse.png">
</div>
<div class="tjuntesse">
<li>Junte-se a Nós</a></li>
</div>
</div>
<a class="itens" href=#Contactos><img class="lampada" src="images/contactos.png"><li class="5">Contactos</li></a>
</b>
</ul>
</div>
</body>
</html>这里我有3次尝试:
- 第一个只是图像，文本与图像的末尾对齐；
- 第二个我尝试插入 div 并最终插入不同的边距，但只要两者都在一个 div 内它就向下传递了一行；
- 在第三个地方，我尝试更改第一个的顺序，尝试将两件事分开:图像和文本。
有谁知道如何像图片中那样对齐菜单？
最佳答案
将 vertical-align:middle; 添加到 .lampada。你让它变得更复杂，所以我也更新了 html 代码。
li {
display: inline;
margin-right: 10px;
}
a.itens:link {
color: #000;
text-decoration: none;
}
a.itens:visited {
color: #000;
}
.menu {
border: 5px solid #EC771A;
font-size: 20;
font-family: Oxygen;
height: 52px;
width: 909px;
}
ul {
margin-top: 4px;
margin-bottom: 0px;
}
div.4 {
width: 168px;
height: 52px;
}
div.ljuntesse {
width: 28px;
height: 52px;
}
div.tjuntesse {
width: 140px;
height: 52px;
}
.ljuntesse, tjuntesse {
display: inline;
}
li.5 {
padding-bottom: 17px;
}
.lampada {
display: inline;
width: 25px;
height: 41px;
vertical-align:middle;
}<html>
<head>
<link type="text/css" rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="menu">
<ul>
<li><a class="itens" href=#menu>Home</a></li>
<li><a class="itens" href=#Projetos><img class="lampada" src="images/parceiros.png">Parceiros</a></li>
<li><a class="itens" href=#LinksUteis><img class="lampada" src="images/links.png">Links Uteis</a> </li>
<li><a class="itens" href=#Blog><img class="lampada" src="images/juntesse.png">Junte-se a Nós</a></li>
<li><a class="itens" href=#Contactos><img class="lampada" src="images/contactos.png">Contactos</a></li>
</ul>
</div>
</body>
</html>关于html - 尝试将文本和图像的链接垂直居中，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38267595/