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/
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.
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
.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>
I downloaded it from here.
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.
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.
It worked, but it also causes the whole block (text with icon) to be bigger. thanks.
