Muresan Andrei Muresan Andrei - 7 months ago 20
HTML Question

Arrange text under icons

i have a problem with a menu i am making, i want it to be something like:

<icon> <icon> <icon>
Title Longer Title
Title


now i have it like this:

<icon>
<icon> longer <icon>
Title Title Title


I made the menu using lists like this (Copy from actual code)

<ul>
<li>
<a href="#"><img src="images/buton1.png" class="butonmeniu"><h2 class="meniufont" >Info utile</h2></a>
</li>
</ul>


and the css styles are like this

.meniufont{
font-family:'Open Sans', sans-serif;
font-size:15px;
margin-right:10px;
text-align: center;
font-weight:normal;
color:#434446;
}
.butonmeniu{
display:block;
}


Thanks alot, if you have any questions please ask. Thank you.

Answer

Your li are using display:inline-block

Add vertical-align:top to the li as the default there is baseline.

.meniufont {
  font-family: 'Open Sans', sans-serif;
  font-size: 15px;
   font-weight: normal;
  color: #434446;
}
.butonmeniu {
  display: block;
}
li {
  display: inline-block;
  text-align: center;
  margin: 0 10px;
  vertical-align: top;
}
<div class="menu">
  <ul>
    <li>
      <a href="#">
        <img src="http://www.fillmurray.com/g/20/20" class="butonmeniu">
        <h2 class="meniufont">Title</h2>
      </a>
    </li>

    <li>
      <a href="#">
        <img src="http://www.fillmurray.com/g/20/20">
        <h2 class="meniufont textjos">Longer <br>Title</h2>
      </a>
    </li>

    <li>
      <a href="#">
        <img src="http://www.fillmurray.com/g/20/20">
        <h2 class="meniufont">Title</h2>
      </a>
    </li>
  </ul>

Comments