[英]How to vertically center a font-awesome icon?
在下面的示例中,我想将fa-plus
图标置于圆圈内。
我注意到的是字形与<i>
标签的顶部对齐。 但是我添加了垂直对齐所需的一切:
https://jsfiddle.net/x2n13p4e/2/
HTML:
<a class="btn icon-btn btn-success" href="#">
<i class="btn-glyphicon text-success fa fa-plus"></i>
Add
</a>
CSS:
.btn-glyphicon {
padding: 3px;
background: #ffffff;
margin-right: 4px;
border-radius: 50px;
width: 1.5em;
height: 1.5em;
text-align: center;
vertical-align:middle !important;
align-items:center;
}
.icon-btn {
padding: 1px 15px 3px 2px;
border-radius: 50px;
text-align: center;
vertical-align:middle;
}
使用position: relative
,可以使图标成为其内部绝对定位项的容器 或伪类,如:before
或:after
。
相对定位容器内的绝对定位项可以水平和垂直居中,如下所示:
.center-horizontally-and-vertically {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.btn-glyphicon { position: relative; padding: 3px; background: #ffffff; margin-right: 4px; border-radius: 50px; width: 1.5em; height: 1.5em; text-align: center; vertical-align: middle !important; align-items: center; } .btn-glyphicon:before { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .icon-btn { padding: 1px 15px 3px 2px; border-radius: 50px; text-align: center; vertical-align: middle; }
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" /> <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" /> <a class="btn icon-btn btn-success" href="#"> <i class="btn-glyphicon text-success fa fa-plus"></i> Add </a>
代替
width: 1.5em;
height: 1.5em;
试试看:
width: 0 auto;
padding: 5px;
尝试在.btn-glyphicon
类中使用line-height
属性。
.btn-glyphicon {
padding: 3px;
background: #ffffff;
margin-right: 4px;
border-radius: 50px;
width: 1.5em;
height: 1.5em;
line-height: 1.5em;
text-align: center;
vertical-align:middle !important;
align-items:center;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.