Search code examples
htmlcssvertical-alignment

CSS Vertical align to middle

I know this issue was discussed many times before. but honestly I didn't find any proper solution for this unique case:

I have the following HTML code:

 <div class="print-types-links">
    <ul>
        <li>
            <a href="#">
                <div> 
                    <span>aaa</span>
                </div>
            </a>
        </li>
        <li>
            <a href="#">
                <div>
                    <span>bbb</span>
                </div>
            </a>
        </li>
    </ul>
</div>

and the following CSS:

.print-types-links li{
list-style: none;

}
.print-types-links ul{
    padding: 0;
}
.print-types-links a{
    text-decoration:none;
}
.print-types-links div:hover{
    background-color:#F7FAFF;
}
.print-types-links div{
    border-style: solid;
    border-width:1px;
    border-color:#EAF2FD;
    margin-bottom: 10px;
    padding-bottom: 60px;
    text-align: center;
}

.print-types-links span{
    font-weight:bold;
    font-size: 1.3em;
}

and I'm trying to vertical-align the <span> inside the <div>.

Required result I wish for: the text should be in middle of each box. I know I can do it with specify pixel number. but i'm trying to avoid it.

I also tried using vertical-align:middle in the span and the parent div without any success.

Fiddle link for the issue.

Thank you.

Solution

  • As you are using padding-bottom: 60px; property in the div that's why div is not vertically aligned . You can use the above property like padding-top: 30px; , padding-bottom: 30px than the div is vertically aligned.

    Please refer the jsfiddle

    CSS:

    .print-types-links div{
    border-style: solid;
    border-width:1px;
    border-color:#EAF2FD;
    margin-bottom: 10px;
    padding-bottom: 30px;
    padding-top: 30px;
    text-align: center;
}