我正在做我的第一个网站,但我不能使图标与文本垂直对齐。
如果我使用Font Awesome图标,它工作得很好,但我不想使用它。
以下是我的代码和图片,以便更好地描述我的问题。
"无法将箭头图标与文本对齐" 图片。
.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>
首先,将此添加到 .link
:
display: flex;
align-items: center;
justify-content: center;
然后,把这个加到 .leftDiv
:
display: flex;
align-items: flex-start;
justify-content: center;
flex-direction: column;
你的代码应该是这样的。
.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;
}
这是一个完整的flexbox指南。https:/css-tricks.comsnippetscssa-guid-to-flexbox。
我认为可以通过使用 padding-bottom
的图标。
.icon {
width: 20px;
height: 20px;
padding-left: 10px;
padding-bottom: 5px;
margin-right: -12px;
}
的图标: padding-bottom
然后可以根据数量的增加或减少 padding
你可能需要垂直排列元素。