Вертикально выровнять элемент внутри плавающей DIV, который находится внутри LI

Question

У меня есть список, который имеет Div внутри него

<ul> 
    <li> 
     <div class="date">today</div> 
     <div class="desc">lorem ipsum</div> 
     <div class="action"> 
      <p> 
       <a class="button">X</a> 
      </p> 
     </div> 
    </li> 
    <li>....</li> 
    <li>....</li> 
</ul> 

Как можно вертикально выровнять, что a.button внутри div.action?

CSS для этого списка генерируется с помощью Сюзи и CSS выглядит так:

ul { 
    list-style: none outside none; 
} 
li { 
    margin-left: 12.766%; 
    margin-right: 12.766%; 
    margin-bottom: 10px; 
    background-color: #eee; 
    display: block; 
} 
li:after { 
    clear: both; 
    content: ""; 
    display: table; 
} 

.date { 
    float: left; 
    margin-right: 2.12766%; 
    width: 10.6383%; 
} 
.desc { 
    float: left; 
    margin-right: 2.12766%; 
    width: 74.4681%; 
} 

.action { 
    float: right; 
    text-align: center; 
    margin-right: 0; 
    width: 10.6383%; 
} 

Я не знаю высоту LI, потому что «убывание» текст может быть любой длины.

Вот код на codepen.io ->http://codepen.io/anon/pen/CFhos

Answer 1

Flexbox можно выровнять только о чем угодно - даже плавал элементы ...

Просто добавьте следующие правила к li:

display: flex; 
align-items: center; /*align vertical */ 

Updated CODEPEN

Answer 2

Вы можете сделать Тхи s без компенсирующего:

ul { 
    list-style: none outside none; 
} 
li { 
    display: table; 
    margin-left: 12.766%; 
    margin-right: 12.766%; 
    margin-bottom: 10px; 
    background-color: #eee; 
} 
p { 
    display: table-cell; 
    margin: 0; 
    padding: 0; 
} 
li:after { 
    clear: both; 
    content: ""; 
    display: table; 
} 

.date { 
    display: table-cell; 
    vertical-align: middle; 
    margin-right: 2.12766%; 
    width: 10.6383%; 
} 
.desc { 
    display: table-cell; 
    vertical-align: middle; 
    margin-right: 2.12766%; 
    width: 74.4681%; 
} 

.action { 
    display: table-cell; 
    vertical-align: middle; 
    margin-right: 0; 
    width: 10.6383%; 
} 

http://codepen.io/anon/pen/yxhkA

Answer 3

Вы можете стилизовать кнопку, чтобы выполнить это следующим образом:

.button{ 
    position: relative; 
    top: 50%; 
    transform: translateY(-50%); 
} 

Пример здесь: http://jsfiddle.net/4amdxtq8/