li vertical centering

by aka_SKIff

HTML

<ul>
    <li>
        <div class="in">
            <a href="#"></a>
        </div>
        <p>Итем1</p>
    </li>
    <li class="center">
        <div class="in">
            <a href="#"></a>
        </div>
        <p>Итем2</p>
        <p>dfgd fgd f</p>
    </li>
    <li>
        <div class="in">
            <a href="#"></a>
        </div>
        <p>Итем3</p>
    </li>
</ul>

CSS

ul {
    width: 100%;
    text-align: center;
    list-style:none;
}

li {
    display:inline-block;
    vertical-align:middle;
    
}
li a {
    width:80px;
    height:80px;
    vertical-align:middle;
    display:inline-block;
}

li.center a {
    width:130px;
    height:130px;
}
li.center .in {
    border-radius:68px;
}
p {
    display:block;
}

.in {
    display:inline-block;
    border:5px solid red;
    border-radius:43px;
    overflow:hidden;
}