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

CyberFlame 0
Viewed 20

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>

html
2 Answers

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>

HTMHell0

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>

Gugalcrom1230
Related