0
我正在一個網站的項目,其中在菜單中,我必須垂直對齊鏈接有兩個部分:一個圖像和描述。其目的是: 但我只是可以這樣做:試圖垂直居中鏈接文本和圖像
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內它只是向下傳遞一行;
- 第三,我試圖改變第一次嘗試分離兩件事情的順序:圖像和文字。
有誰知道如何對齊菜單中的圖像?
穆克什我看過你的edtion,我真的東西它現在好多了,但我必須做任何留在該版本或者大家已經可以看到你eddited? –