Align a 'span' in the vertical center of a 'li' without changing the rest of the text

Navigation
2

I have an unordered list that needs to be kept in the same format because it is a dynamically mounted side menu. More or less like this: 

<ul>
  <li>
    <a> Link 1 <span> Algum texto </span> </a>
  </li>
  <li>
    <a> Link 2 </a>
  </li>
  <li>
    <a> Link 3 </a>
  </li>
</ul>

This <span> that is within <li> must remain vertically aligned even when the link text is too large and needs to occupy two lines or more. More or less like this:

So far, I have not been successful. I can verticalize <span> in certain situations, but not in all.

Could someone help me?

    
asked by anonymous 21.07.2014 / 20:30

1 answer

1

My original solution was wrong, I did not read that the goal was to centralize span vertically. In this case the solution is to have li displayed as table , and that both span and link are displayed as table-cell . Cells can be vertically centered with vertical-align: middle 

ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
li {
    padding: 0 15px 10px;
    display: table;    
}
li a {
    color: blue;
    width: 150px;
    display: table-cell;
    text-decoration: none;
}
.options {
    color: red;
    width: 50px;
    padding-left: 35px;
    display: table-cell;
    vertical-align: middle;
}

Functional sample

    
21.07.2014 / 23:17
Problem with CSS button positioning How to do a select with several 'where like' field %% in C #