css - 无法将素材图标垂直居中
问题描述
我试图放置material icon
在圆心我尝试了以下方法尝试添加vertical-align:middle
和添加text-align:center
但没有任何工作。
@font-face {
font-family: 'Material Icons';
font-style: normal;
font-weight: 400;
src: url(https://fonts.gstatic.com/s/materialicons/v41/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2) format('woff2');
}
.mi {
font-family: 'Material Icons';
font-weight: normal;
font-style: normal;
line-height: 1;
letter-spacing: normal;
text-transform: none;
display: inline-block;
white-space: nowrap;
word-wrap: normal;
direction: ltr;
-webkit-font-feature-settings: 'liga';
-webkit-font-smoothing: antialiased;
}
a {
border: 1px solid #3D3E02;
border-radius: 50%;
padding: 10px;
color: #334048;
}
a i {
font-size: 20px;
}
.t{vertical-align:middle}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet" />
<br><br><br>
<a href="#"><i class="mi"></i></a>
<br><br><br>
<a href="#"><i class="mi t"></i></a>
解决方案
我已将其更改.t{vertical-align:middle}
为.t{vertical-align:bottom}
,它对我来说效果很好。
@font-face {
font-family: 'Material Icons';
font-style: normal;
font-weight: 400;
src: url(https://fonts.gstatic.com/s/materialicons/v41/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2) format('woff2');
}
.mi {
font-family: 'Material Icons';
font-weight: normal;
font-style: normal;
line-height: 1;
letter-spacing: normal;
text-transform: none;
display: inline-block;
white-space: nowrap;
word-wrap: normal;
direction: ltr;
-webkit-font-feature-settings: 'liga';
-webkit-font-smoothing: antialiased;
}
a {
border: 1px solid #3D3E02;
border-radius: 50%;
padding: 10px;
color: #334048;
}
a i {
font-size: 20px;
}
.t{vertical-align:bottom}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet" />
<br><br><br>
<a href="#"><i class="mi"></i></a>
<br><br><br>
<a href="#"><i class="mi t"></i></a>
这是你要找的。?希望这解决了您的问题。
推荐阅读
- python - Altair 复合图表(分层和连接)可以有不同的背景颜色吗?
- html - 按最大文本内容缩放表格列
- reactjs - 将第三方渲染道具组件转换为钩子
- sql - 如何删除特定表的所有记录,但最近 6 个月的数据除外
- ms-project - MS 项目 REST API
- python - 如何将一系列 IF 语句转换为 Pythonic 代码行?
- visual-studio-code - 如何在 settings.json 中为给定语言指定折叠开始和折叠结束模式
- c# - 匹配音频文件长度的秒和毫秒
- javascript - 为旨在作为集合的对象创建布尔值
- jquery - 如何制作一个过滤类名(多个)下拉列表的 jQuery 过滤器