Question

我正在开发一个网站项目，我必须在菜单中垂直对齐包含两个部分的链接：一个图像和一个描述。目的是：但我可以做到这一点：

＆＃13;

int total = arr.Cast<int>().Sum();

＆＃13;

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;
}

＆＃13;

这里我有三次尝试：

第一个是文本与图像末尾对齐的图像;
我尝试插入div并最后插入不同边距的第二个，但只要两个都在一个div中它只是向下传递一行;
我试图改变第一次尝试将第一部分分开的第三部分：图像和文字。

有没有人知道如何在图片中对齐菜单？

Answer 1

将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>

尝试垂直居中与文本和图像的链接

1 个答案: