Make logos vertically centered

Often if you are developing a site for any organization , you need to display the list of partner or brand logos somewhere in the website section. If you have logos with same size then there is no problem, you can align the logos both vertically and horizontally easily.

But what if the logos you have are of different sizes , different in width and height. Then you might be looking for a solution to make logos vertically centered.

Vertically Centered logos using css

Vertically Centered logos using css

Here is the solution for you.  Put your logos in list item, you can also choose div structure if you want. So here should be your html markup.

<ul class="horizontal">
    <li>
        <img src="http://netdna.webdesignerdepot.com/uploads/circular_logos/filmax.jpg"/>
    </li>
    <li>
        <img src="http://coneyislandpark.com/imgUploader/logos/Pepsi_logo_2008.png"/>
    </li>
    <li>
        <img src="http://vrworld.com/wp-content/uploads/2014/05/AppleLogo.jpg"/>
    </li>
    <li>
        <img src="http://vanimg.s3.amazonaws.com/good-logos-5.jpg"/>
    </li>
</ul>

Now here is you CSS, just copy paste it and enjoy 😉

ul,li{
   margin: 0;
   padding:0;
   list-style: none;
}
.horizontal {
    display: flex;
    justify-content: center;
}
.horizontal li {
    display: flex;
    flex-direction: column;
    justify-content: center;
}
img { 
    width: 100px;
    height: auto; 
}
Advertisements

One thought on “Make logos vertically centered

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s