如何在不移动文本的情况下水平左对齐和垂直居中对齐我的图标？

Question

How can I align my icons left-horizontally and center-vertically without moving my text? For example:

Here is my code:

 .leftpanel a { display: block; height: 65px; text-align: center; /* This also move my icons which I don't want to */ vertical-align: middle; line-height: 65px; }

 <div class="leftpanel"> <img src="media/logo.png" class="logo"> <a href="acceuil" class="acceuil"><img src="media/icons/home.png" class="icons">acceuil</a> <a href="le-grand-salon" class="le-grand-salon"><img src="media/icons/sofa.png" class="icons">le grand salon</a> <a href="boutique" class="boutique"><img src="media/icons/shop.png" class="icons">boutique</a> </div>

Answer 1

You should wrap the text with an element that takes all available space with text-align: center .

 .menu a { display: flex; align-items: center; }.menu a span { flex: 1; text-align: center; }

 <div class="leftpanel"> <img src="media/logo.png" class="logo"> <div class="menu"> <a href="acceuil" class="acceuil"> <img src="media/icons/home.png" class="icons"> <span>acceuil</span> </a> <a href="le-grand-salon" class="le-grand-salon"> <img src="media/icons/sofa.png" class="icons"> <span>le grand salon</span> </a> <a href="boutique" class="boutique"> <img src="media/icons/shop.png" class="icons"> <span>boutique</span> </a> </div> </div>

Answer 2

You can use flexbox. Flexbox solves all your problems.

 .leftpanel a { display: flex; height: 65px; align-items: center; line-height: 65px; }.leftpanel a img { display: block; flex-grow: 0; }.leftpanel a span { display: block; flex-grow: 1; text-align: center; }

 <.-- I put the text in spans so we can style it separately --> <div class="leftpanel"> <img src="media/logo.png" class="logo"> <a href="acceuil" class="acceuil"><img src="media/icons/home.png" class="icons"><span>acceuil</span></a> <a href="le-grand-salon" class="le-grand-salon"><img src="media/icons/sofa.png" class="icons"><span>le grand salon</span></a> <a href="boutique" class="boutique"><img src="media/icons/shop.png" class="icons"><span>boutique</span></a> </div>