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:
Thank you in advance!
You just need to assign
vertical-align: topto youliand thats it