Solution 1 :

First, add this to .link:

display: flex;
align-items: center;
justify-content: center;

Then, add this to .leftDiv:

display: flex;
align-items: flex-start;
justify-content: center;
flex-direction: column;

Your code should look like this:

.icon {
  width: 20px;
  height: 20px;
  padding-left: 10px;
  margin-right: -12px;
}

.link {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: row;
  text-decoration: none;
  font-size: 20px;
  padding-top: 10px;
  padding-bottom: 10px;
}

.leftDiv {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  flex-direction: column;
  width: 200px;
  height: 100%;
  background-color: lightgray;
  padding-top: 10px;
  box-shadow: rgba(0, 0, 0, 0.5) 3px 0px 10px;
}

Here is a complete guide to flexbox: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Solution 2 :

I think the problem can be fixed by using padding-bottom for the icon:

.icon {
  width: 20px;
  height: 20px;
  padding-left: 10px;
  padding-bottom: 5px;
  margin-right: -12px;
}

The padding-bottom can then be added or subtracted based on the amount of padding you may need to vertically align the elements.

Problem :

I’m making my first website, but i can’t make the icon to vertically align with the text

if i used Font Awesome icons it works great, but i don’t want to use it.

here is my code and the image to better describe my problem.

“Can’t align the arrow icon with text” Image

enter image description here

.icon {
  width: 20px;
  height: 20px;
  padding-left: 10px;
  margin-right: -12px;
}

.link {
  display: block;
  text-decoration: none;
  font-size: 20px;
  padding-top: 10px;
  padding-bottom: 10px;
}

.leftDiv {
  width: 200px;
  height: 100%;
  background-color: lightgray;
  padding-top: 10px;
  box-shadow: rgba(0, 0, 0, 0.5) 3px 0px 10px;
}
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <title>Nature Gallery</title>
  <link rel="shortcut icon" href="Icon/NG.png" />
  <link href="Style/StyleSheet1.css" rel="stylesheet" />
  <link href="Content/font-awesome.css" rel="stylesheet" />
</head>

<body>
  <div class="leftDiv">
    <a href="Home.html" class="link">
      <i class="fa fa-long-arrow-right"></i> Home
    </a>

    <a href="Home.html" class="link">
      <img src="Icon/long-arrow-alt-right-solid.svg" class="icon" /> Home
    </a>

    <a href="Home.html" class="link">
      <img src="Icon/long-arrow-alt-right-solid.svg" class="icon" style="vertical-align:middle;" /> Home
    </a>
  </div>
</body>

</html>

Comments

Comment posted by Manjuboyz

can you share the actual svg(arrow) to look into it?

Comment posted by fontawesome.com/icons/long-arrow-alt-right?style=solid

I downloaded it from here.

Comment posted by Fady

I can modify minY in the viewBox attribute (by opening the SVG in text editor) this will correctly align them, but i can’t do this for each icon they are too many.

Comment posted by Fady

I entered negative value because i want the text and icon to intersect (overlap) with each other to better see the misalignment. I spent 5 hours searching for this and tried to see how font awesome align them correctly, but didn’t find answer.

Comment posted by Fady

i will try that and tell you the results

Comment posted by Fady

It worked, but it also causes the whole block (text with icon) to be bigger. thanks.

By

Leave a Reply

Your email address will not be published. Required fields are marked *