Aligning Logo Images in CSS
As a front-end developer, you may have worked on making a section that contains logos for brands, clients, companies, you name it. That task can seem simple at first, but it brings some challenges a long with it that are related to the alignment and centering of those logos. Adding on that, some logos look horizontal and some are more vertical, let alone the different image sizes for each one. In this article, I will tackle the task of taking a group of logos, and exploring many ways to align and position them perfectly in CSS. It’s worth mentioning that such articles will please designers, as it will make implementing their perfect-aligned logo sections much, much easier ;). Are you ready? Let’s dive in and align those logos! A Quick Design Introduction Before we dive into CSS and how to better organize and style the logos of different sizes, I want to give a quick introduction of how I (as a designer) arrange logos in a design app. For this article, I will use Sketch App, but feel free to use whatever tool you want. I have eight logos that I need to organize in a grid, so the first thing I did is that I selected them and dragged them to the Sketch canvas. I know, the logos are looking ugly. Let’s fix this! While selecting all the logos, make sure that the width and height are locked, and change either the width or height to 150px. In the below video, I resized the logos, and then rearranged them in a grid. Notice how some logos look bigger than others? AirBnb is the largest one. To judge better, I usually draw a rectangle for each logo, and that rectangle will help me in deciding if the size of the logos is better, the alignment, and the spacing between other logos. Keep in mind that the spacing between rectangles should be equal. In Sketch, you can easily do that by selecting a row, and from the top right corner, click on Tidy and adjust the spacing. Keep it at least 10px. Now with the rectangle, some logos look misaligned, big, or completely out of the position. I will resize the logos and center them. See below: After resizing and aligning the logos, there is a problem with the dropbox business one. I kept the rectangle so you can see the problem. First, the logo is horizontal (too long), and it has a white background beneath it. We can remove that background by cropping the logo inside Sketch. All right, now we have a good design that is ready to be implemented in HTML and CSS. Keep in mind that the following explanation will assume that you got random logos from the designer without considering their size. Implementing the logos grid Let’s explore how to implement the logos in HTML & CSS, considering the following: They should be responsive. Logo sizes should be close to each other. E.g: it’s not recommended to have a big logo, and another one small. There should be a minimum/maximum sizes defined for the logos. src=”img/logo.png” alt=”” For this example, I will use CSS grid for the layout. However, it’s up to you what to use, depending on your case and the browsers you want to support. » Read More
Like to keep reading?
This article first appeared on ishadeed.com. If you'd like to keep reading, follow the white rabbit.