テキストと画像のリンクを垂直に中心にしてみよう

私は、メニューで2つの部分（1つの画像と説明）を持つリンクを垂直に揃えなければならないウェブサイトのプロジェクトに取り組んでいます。テキストと画像のリンクを垂直に中心にしてみよう

その最初が揃えテキストを持つだけのイメージだ：私は3回の試行を持っている。ここ

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を挿入しようとしたところで、最後に別の余白を挿入しようとしましたが、両方が1つのdivの中にある限り、ただ1行下がりました。
私が最初に画像とテキストの2つのものを分離しようとする順序を変えようとしたところの3番目の部分です。

画像のようにメニューを整列させる方法を知っている人はいますか？

出典

2016-07-08 P. Duarte

ムケシュ私はあなたがedditedとして、それは今より良いですが、私はこのバージョンまたは皆と一緒に何かをしなければならないの事はすでに見ることができます本当にあなたのEDTIONと私を見てきましたか？ –

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>

出典

2016-07-08 13:19:50

うわー！頭痛が終わった！どうもありがとう！ –

テキストと画像のリンクを垂直に中心にしてみよう

答えて

関連する問題