css - How to center verticaly n inline containers with different font-size? -

i discovered display: table , display: table-cell; vertical-align: middle method align divs verticaly today.

i using @ many places of code, meet specific case can't make works!

when want verticaly align n elements containing elements has same font-size, works fine, if want text bigger on 1 inline elements others, here happens:

html:

<div class="wrapper">     <div class="menu">         <div class="left"><span>left</span>         </div>         <div class="middle"><span>middle</span>         </div>         <div class="right"><span>right</span>         </div>     </div> </div> 

css:

button {     margin:0;     padding:0;     cursor:pointer; } .wrapper {     height: 300px;     width: 600px;     background-color:red;     white-space: nowrap; } .menu {     height: 100%;     width: 80%; } .left {     height: 100%;     width: 20%;     display:inline-table;     background-color:blue; } .middle {     height: 100%;     width: 60%;     display:inline-table;     background-color:orange; } .right {     height: 100%;     width: 20%;     display:inline-table;     background-color:green; } span {     display:table-cell;     vertical-align:middle; } .middle span {     font-size:5em; } 

results:

here jsfiddle showing issue

how avoid that? maybe there better way inline-table trick case?

just vertical align direct children of container, in case job:

.menu > div {    vertical-align: middle; }