2016-07-08 56 views
0

我正在一個網站的項目,其中在菜單中,我必須垂直對齊鏈接有兩個部分:一個圖像和描述。其目的是: enter image description here 但我只是可以這樣做:試圖垂直居中鏈接文本和圖像

li { 
 
\t display: inline; 
 
\t margin-right: 10px; 
 
} 
 

 
a.itens:link { 
 
\t color: #000; 
 
\t text-decoration: none; 
 
} 
 

 
a.itens:visited { 
 
\t color: #000; 
 
} 
 

 
.menu { 
 
\t border: 5px solid #EC771A; 
 
\t font-size: 20; 
 
\t font-family: Oxygen; 
 
\t height: 52px; 
 
    width: 909px; 
 
} 
 

 
ul { 
 
\t margin-top: 4px; 
 
\t margin-bottom: 0px; 
 
} 
 

 
div.4 { 
 
\t width: 168px; 
 
\t height: 52px; 
 
} 
 

 
div.ljuntesse { 
 
\t width: 28px; 
 
\t height: 52px; 
 
} 
 

 
div.tjuntesse { 
 
\t width: 140px; 
 
\t height: 52px; 
 
} 
 

 
.ljuntesse, tjuntesse { 
 
\t display: inline; 
 
} 
 

 
li.5 { 
 
\t padding-bottom: 17px; 
 
} 
 

 

 
.lampada { 
 
\t display: inline; 
 
\t width: 25px; 
 
\t height: 41px; 
 
}
<html> 
 
\t <head> 
 
\t \t <link type="text/css" rel="stylesheet" href="css/style.css"> 
 
\t </head> 
 
\t <body> 
 
\t \t \t <div class="menu"> 
 
\t \t \t <ul> 
 
\t \t \t \t <b> 
 
\t \t \t \t \t <li><a class="itens" href=#menu>Home</a></li> 
 

 
\t \t \t \t \t <li><a class="itens" href=#Projetos><img class="lampada" src="images/parceiros.png">Parceiros</a></li> 
 

 
\t \t \t \t \t <li><a class="itens" href=#LinksUteis><img class="lampada" src="images/links.png">Links Uteis</a> </li> 
 

 
\t \t \t \t \t <div class="4"> 
 
\t \t \t \t \t \t <a class="itens" href=#Blog> 
 
\t \t \t \t \t \t \t <div class="ljuntesse"> 
 
\t \t \t \t \t \t \t \t <img class="lampada" src="images/juntesse.png"> 
 
\t \t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t \t <div class="tjuntesse"> 
 
\t \t \t \t \t \t \t \t <li>Junte-se a Nós</a></li> 
 
\t \t \t \t \t \t \t </div> 
 
\t \t \t \t \t </div> 
 

 
\t \t \t \t \t <a class="itens" href=#Contactos><img class="lampada" src="images/contactos.png"><li class="5">Contactos</li></a> 
 
\t \t \t \t </b> 
 
\t \t \t </ul> 
 
\t \t \t </div> 
 
</body> 
 
</html>

在這裏,我有三次嘗試:

  • 首先,這只是對齊文本圖像與圖像的結尾;
  • 第二個我試圖插入div並最終插入不同的邊距,但只要兩個都在一個div內它只是向下傳遞一行;
  • 第三,我試圖改變第一次嘗試分離兩件事情的順序:圖像和文字。

有誰知道如何對齊菜單中的圖像?

+0

穆克什我看過你的edtion,我真的東西它現在好多了,但我必須做任何留在該版本或者大家已經可以看到你eddited? –

回答

0

vertical-align:middle;加上.lampada。你讓它更復雜,所以我也更新了html代碼。

li { 
 
\t display: inline; 
 
\t margin-right: 10px; 
 
} 
 

 
a.itens:link { 
 
\t color: #000; 
 
\t text-decoration: none; 
 
} 
 

 
a.itens:visited { 
 
\t color: #000; 
 
} 
 

 
.menu { 
 
\t border: 5px solid #EC771A; 
 
\t font-size: 20; 
 
\t font-family: Oxygen; 
 
\t height: 52px; 
 
    width: 909px; 
 
} 
 

 
ul { 
 
\t margin-top: 4px; 
 
\t margin-bottom: 0px; 
 
} 
 

 
div.4 { 
 
\t width: 168px; 
 
\t height: 52px; 
 
} 
 

 
div.ljuntesse { 
 
\t width: 28px; 
 
\t height: 52px; 
 
} 
 

 
div.tjuntesse { 
 
\t width: 140px; 
 
\t height: 52px; 
 
} 
 

 
.ljuntesse, tjuntesse { 
 
\t display: inline; 
 
} 
 

 
li.5 { 
 
\t padding-bottom: 17px; 
 
} 
 

 

 
.lampada { 
 
\t display: inline; 
 
\t width: 25px; 
 
\t height: 41px; 
 
    vertical-align:middle; 
 
}
<html> 
 
\t <head> 
 
\t \t <link type="text/css" rel="stylesheet" href="css/style.css"> 
 
\t </head> 
 
\t <body> 
 
\t \t \t <div class="menu"> 
 
\t \t <ul> \t \t \t \t 
 
\t \t \t \t <li><a class="itens" href=#menu>Home</a></li> 
 

 
\t \t \t \t <li><a class="itens" href=#Projetos><img class="lampada" src="images/parceiros.png">Parceiros</a></li> 
 

 
\t \t \t \t <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> 
 
     
 
\t \t </ul> 
 
\t \t </div> 
 
</body> 
 
</html>

+0

哇!頭痛結束了!非常感謝! –