How to set contents vertically centered?

Question

I created one div of 700px width and 200px height. Inside this div, some tags will load dynamically for up to 2 lines. If tags are in 2 lines then alignments looks fine but for 1 line shows lots of spaces in bottom. I need this tags are to be loaded vertically center. enter image description here

Did you googled it? http://stackoverflow.com/questions/8865458/how-to-align-text-vertical-center-in-div-with-css and many resources are available. BTW, I did not down vote you. — Kunj, Feb 26 '14 at 12:26

score 1 · Accepted Answer · answered Feb 26 '14 at 12:38

Here's an example:

HTML:

<div class="wrapper">
    <ul class="inner">
        <li>c</li>
        <li>c++</li>
        <li>text</li>
        <li>long long long text</li>
        <li>another text</li>
    </ul>
</div>
<div class="wrapper">
    <ul class="inner">
        <li>c++</li>
        <li>text</li>
        <li>another text</li>
        <li>long long long text</li>
        <li>another text</li>
        <li>another text</li>
        <li>another text</li>
        <li>long long long text</li>
        <li>another text</li>
        <li>another text</li>
    </ul>
</div>

CSS:

.wrapper {
    width: 700px;
    height: 200px;
    padding: 0 10px;
    display: table;
    vertical-align: middle;
    background-color: blue;
    margin-bottom: 20px;
}
.inner {
    display: table-cell;
    vertical-align: middle;
}
li {
    float: left;
    color: #000;
    margin: 2px;
    padding: 5px;
    display: inline-block;  
    list-style-type: none;
    border: 1px solid #000;
}

FIDDLE

How to set contents vertically centered?

1 Answers1