Allign Icons with Text in perfect line

HTML-CSS
1

Hi guys!

I have been working on the projects and it happen multiple times that i can’t align icons with the text.
Both elements are in separate Div’s. but I can’t get the icons perfectly aligned.

You can see my code in git GIT link
or the Pen link

Pen Link

Your guidance would be much appreaciated.

2

im confused on that as well

4

Do you want them center aligned or from the top or bottom? Flex is pretty awesome when it comes to aligning content in my opinion, but sometimes some extra padding might need to be added to get exact alignment, especially if there’s some blank space at the top and bottom of the image, which in your case there is.

Just saw that you have tried justify-content:baseline; baseline isn’t a valid alignment option. I recomment you check out https://flexboxfroggy.com/ I did it once ages ago, ever since aligning things has been a breeze.

1 Like
5

Hi Michelini,

Yes, i used that as i had icon and text into 2 separate divs, hence i thought i could align them by baseline. Didnt work.

I will do the froggy as it was on my list as well :slight_smile:

I want to have the following:

                         Icon          Text
                         Icon          Text
                         Icon          Text

right now is someething like:

                         Icon          Text
                              Icon          Text
                                  Icon          Text
6

baseline isn’t a valid option for justify content, css won’t recognise that line and will just ignore it. I think you might mean flex-end, instead of baseline.

its more like this:

                            I  c  o  n     T  e  x  t
                               I c o n     T e x t
                                  Icon     Text

they are aligned about the center in your features section. You want them aligned from the start, using flex-start. Heres a simplified version https://codepen.io/mmichelini1997/pen/PoYgoqY.

8

Found the issue. Problem was that the DIVs had different size due to its content, hence i had to make sure that all those divs in grid had the same size in order for the flex align-items to work properly.

:slight_smile: that was tricky to get

I have pushed all my changes to GitHub and also to Pen if you are interested in the result.

.grid{
    display: flex;
    width: 50%;
    margin: 50px;}
1 Like