Smythu Smythu - 5 months ago 8
CSS Question

Vertical align a picture and a text

Im trying to get my picture (21x21px) and my text (14px) on the right side to vertivcally centered, but as soon as I put my picture in it, the

<a>
gets bigger.. how can I do it correctly?

the class "aPctr" is just giving the photo 21x21px

Heres my code: https://jsfiddle.net/vc0h9Ldb/

<div id="cssmenu">
<ul class="_mrgA">
<li>
<a href="#">Home</a>
</li>
<li class="active has-sub">
<span class="submenu-button"></span>
<a href="#">Products</a>
<ul>
<li class="has-sub">
<span class="submenu-button"></span>
<a href="#">Product 1</a>
<ul>
<li>
<a href="#">Sub Product</a>
</li>
<li>
<a href="#">Sub Product</a>
</li>
</ul>
</li>
<li class="has-sub">
<span class="submenu-button"></span>
<a href="#">Product 2</a>
<ul>
<li>
<a href="#">Sub Product</a>
</li>
<li>
<a href="#">Sub Product</a>
</li>
</ul>
</li>

</ul>
</li>
<li>
<a href="#">About</a>
</li>
<li>
<a href="#">Contact</a>
</li>
<li class="account-lnk" style="float: right; height: 0;">
<a href="#">
<img src="img/autor.jpg" class="_aPctr">
<span> Name</span>
</a>
</li>
</ul>
</div>

Answer

Please use this,It is really help to you...

<li class="account-lnk" style="float: right; height: 0px; position: relative; display: table;">
<a href="#" style="padding: 14px 20px;">
<img class="_aPctr" src="img/autor.jpg" style="display: table-cell; vertical-align: middle;">
<span style="vertical-align: middle;"> Name</span>
</a>
</li>

please accept and upvote if you found the answer.