如何将图像与文本垂直对齐
[英]How to vertically align image with text
问题描述
我正在制作我的第一个网站，但我无法使图标与文本垂直对齐
如果我使用 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>
2 个解决方案
解决方案1
0 2020-05-07 15:07:53
我认为可以通过对图标使用padding-bottom来解决问题：
.icon {
width: 20px;
height: 20px;
padding-left: 10px;
padding-bottom: 5px;
margin-right: -12px;
}
然后可以根据垂直对齐元素所需的padding量来添加或减去padding-bottom 。
解决方案2
0 已采纳 2020-05-07 16:05:34
首先，将其添加到.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.com/snippets/css/a-guide-to-flexbox/
垂直对齐图像和文本
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.