Search code examples
jqueryhtmlcsswordpressvertical-alignment

Fixed width list items & vertical alignment issue

I have 5 horizontal list items, each with a fixed width and height and the text within is vertically and horizontally aligned. One of the items has text that spans more than one line. Because of this, it screws up the alignment with the other 4 items. Can anyone help? Here's my HTML/CSS code:

#filters li {
    display: inline-block;
    border: 2px solid #ff1c71;
    margin-right: 1%;
    height: 80px;
    cursor: pointer;
}

#filters li a {
    display: inline-block;
    width: 200px;
    text-align: center;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
}
<ul id="filters">
  <li class="work-active">
    <a href="javascript:void(0)" title="" data-filter=".all" class="medium pink">All</a>   </li>
  <li id="end-user-support-link">
    <a href="javascript:void(0)" title="" data-filter=".end-user-support" class="medium pink ">End User Support</a></li>
  <li id="graphic-design-link">
    <a href="javascript:void(0)" title="" data-filter=".graphic-design" class="medium pink ">Graphic Design</a></li>
  <li id="systems-and-network-administration-link">
    <a href="javascript:void(0)" title="" data-filter=".systems-and-network-administration" class="medium pink ">Systems and Network Administration</a></li>
  <li id="web-development-link">
    <a href="javascript:void(0)" title="" data-filter=".web-development" class="medium pink last">Web Development</a>
  </li>
</ul>

The item in question is "System and Network Administration" that spans 2 lines.

Here's what the UI looks like:

enter image description here

Thank you in advance!

Solution

  • You just need to assign vertical-align: top to you li and thats it

    #filters li {
    display: inline-block;
    border: 2px solid #ff1c71;
    margin-right: 1%;
    height: 80px;
    cursor: pointer;
    vertical-align: top; /* ---- this line aligns all the `li` to top vertically --*/
}

#filters li a {
    display: inline-block;
    width: 200px;
    text-align: center;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
}
    <ul id="filters">
  <li class="work-active">
    <a href="javascript:void(0)" title="" data-filter=".all" class="medium pink">All</a>   </li>
  <li id="end-user-support-link">
    <a href="javascript:void(0)" title="" data-filter=".end-user-support" class="medium pink ">End User Support</a></li>
  <li id="graphic-design-link">
    <a href="javascript:void(0)" title="" data-filter=".graphic-design" class="medium pink ">Graphic Design</a></li>
  <li id="systems-and-network-administration-link">
    <a href="javascript:void(0)" title="" data-filter=".systems-and-network-administration" class="medium pink ">Systems and Network Administration</a></li>
  <li id="web-development-link">
    <a href="javascript:void(0)" title="" data-filter=".web-development" class="medium pink last">Web Development</a>
  </li>
</ul>