CODEWITHSUNDEEP
htmlcssvertical-alignment
Gil Peretz
Gil Peretz

Reputation: 2419

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.

Upvotes: 0

Views: 623

Answers (4)

Rick Hitchcock
Rick Hitchcock

Reputation: 35670

line-height is the key to making vertical-align work:

.print-types-links div{
    height: 80px;
    line-height: 80px;
}

.print-types-links span{
    line-height: 1.2em;
    display: inline-block;
    vertical-align: middle;
}

Fiddle

Upvotes: 0

vbouk
vbouk

Reputation: 298

Try with padding : padding:30px 0px;. Give 30px top and bottom. It will align your text to the middle

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

Upvotes: 0

J Prakash
J Prakash

Reputation: 1333

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;
}

Upvotes: 1

pavel
pavel

Reputation: 27072

You need to set there display: table/table-cell property to divs and spans. Then don't forget to remove bottom padding for div.

.print-types-links div {
    padding-bottom: 0; 
    display: table; 
    width: 100%; 
    vertical-align: middle; 
    height: 100px;
 }

.print-types-links span {
    display: table-cell; 
    vertical-align: middle;
 }

http://jsfiddle.net/zo04s8q7/3/

Upvotes: 1

Related Questions