CODEWITHSUNDEEP
htmlcssalignmentcenter
user3442585
user3442585

Reputation:

Vertically center logos on footer

guys. I've been building a website and I found trouble in the very end, when putting some logos (like partners) in the footer. I created a div with 3 divs: each one with a text and 2 logos, but I can't find a way to vertically center these logos. There is the part of the HTML:

<div id="footer">
<div class="footer">
<span style="font-weight: bold;">Realização:</span><br>
<img src="./images/logoufes.png" style="height:65px" class="logo">
<img src="./images/logopet.png" style="height:45px" class="logo">
</div>
<div class="footer">
Patrocínio:<br>
<img src="./images/logonexa.png" style="height:25px" class="logo">
<img src="./images/logovixteam.png" style="height:25px" class="logo">
</div>
<div class="footer">
Apoio:<br>
<img src="./images/logosuporte.png" style="height:25px" class="logo">
<img src="./images/logografica.png" style="height:35px" class="logo">
</div>
<div style="clear:both"></div>

and the CSS:

div#footer{
    background: #005426;
    text-color: #fff;
    display:block;
    padding:5px;

}

.footer{
    width:33%;
    float:left;
    color: #fff;
    font-weight:bold;
    font-size:14px;
    border-top:10px;
    position:relative;
}

.logo{
    padding: 0px 10px 0px 10px;
}

Any way to vertically center these logos?

Upvotes: 0

Views: 2346

Answers (1)

badAdviceGuy
badAdviceGuy

Reputation: 2090

Here is one solution that may work for you:

Demo Fiddle

Making the .footer class display inline-block allows you to vertically align the image elements.

CSS:

.footer{
    //float:left;

    width:32%;
    display: inline-block;
}

.logo{
    vertical-align: middle;
}

Upvotes: 2

Related Questions