html - how to make div with one line of text and div with two the same height? -
how can make boxes (box class) same height status in same line? text inside boxes need vertically aligned. need (don't worry arrows):
i need support ie10. have html , css this:
ul { list-style: none; padding: 0; margin: 0; } ul li { float: left; } .box { white-space: pre; text-align: center; display: block; border: 1px solid black; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; width: 200px; padding: 10px 0; }
<ul> <li> <span class="box">get parent folder owner</span> <span class="status">passed</span> </li> <li> <span class="box">some text</span> <span class="status">passed</span> </li> <li> <span class="box">some text</span> <span class="status">running</span> </li> </ul>
add 3 last properties:
.box { white-space: pre; text-align: center; display: block; border: 1px solid black; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; width: 200px; padding: 9px 0; /*add lines below:*/ display: table-cell; height: 70px; vertical-align: middle; }
Comments
Post a Comment