Ich versuche, die Tag und die <nav> auszurichten. Ich habe versucht, sie beideCss Bild neben Navigationsleiste ausrichten
display:inline-block;
aber es gibt keine Ergebnisse, dass ...
http://codepen.io/anon/pen/QEgpzP
Das ist mein Stift zu geben.
Ich bin sehr froh, wenn mir jemand erklären kann, wie man die Tags ausrichtet, ohne das Table-Tag zu verwenden.
Danke.
Sie müssen auf .logo, vertical=align: middle eingestellt werden. Hier Lösung:
*
{
margin:0;
padding:0;
text-align:center;
}
body
{
direction:rtl;
font-size:100%;
background-color:#dfdfdf;
}
#menu div
{
width:80%;
margin:0 auto;
}
#menu
{
width:100%;
background-color:#339966;
direction:rtl;
font-size:1.8em;
}
#menu .logo
{
display:inline-block;
vertical-align: middle;
border-radius:50%;
}
#menu ul
{
display:inline-block;
width:50%;
background-color:red;
font-size:0;
}
#menu i
{
font-size:0.9em;
}
#menu li
{
white-space:nowrap;
padding:10px 0;
display:inline-block;
width:25%;
font-size:30px;
}
#menu li a
{
transition:all 0.3s;
padding-bottom:8px;
cursor:pointer;
}
#menu li a:hover
{
border-bottom:3px solid brown;
}<nav id="menu">
<div>
<img class="logo" src="https://placehold.it/100x100"></img>
<ul>
<li><a><i class="fa fa-picture-o" aria-hidden="true"></i> גלרייה </a> </li>
<li><a><i class="fa fa-picture-o" aria-hidden="true"></i> גלרייה </a> </li>
<li><a><i class="fa fa-picture-o" aria-hidden="true"></i> גלרייה </a> </li>
<li><a><i class="fa fa-picture-o" aria-hidden="true"></i> גלרייה </a> </li>
</ul>
<div>
</nav>Dadurch wird das Bild auf der linken Seite des Menüs allign und einen Raum von 5px zwischen verlassen.
#menu .logo
{
position: absolute;
display:inline-block;
border-radius:50%;
float: left;
left: 5px;
}
versuchen Sie mit 'img {vertikal-align: Mitte;}' – blonfu
Sie meinen, vertikal ausrichten? – AleshaOleg
Fragen, die Debugging-Hilfe suchen ("Warum funktioniert dieser Code nicht?") Müssen das gewünschte Verhalten, ein spezifisches Problem oder einen Fehler und den kürzesten Code enthalten, um es ** in der Frage selbst zu reproduzieren **. Fragen ohne eine klare Problemstellung sind für andere Leser nicht nützlich. Siehe: [MCVE] – Pete