如何制作带有圆形边框的 div 并使其内部的 fa 图标居中?

Question

所以我想要一个带有圆形边框的div(做一个圆圈)，在里面我想要我的fa图标，它将与中间对齐。

所以基本上我想要一个在中间包含一个 fa 图标的圆圈，只是为了让它变得简单。

.normal-page {
padding-top: 30px;
}
body .normal-page {
z-index: 998;
position: relative;
padding-bottom: 10px;
background: url(../images/tpbg.jpg) top center no-repeat #141416;
border: 1px solid #000;
border-top: 0;
min-height: 500px;
}
.container {
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
.vote-container {
text-align: center;
padding-left: 30px;
padding-right: 30px;
color: #fff;
}
.vote-fa {
color: #ff8800;
margin-bottom: 20px;
}
.vote-container a {
cursor: pointer;
}

<link href="https://netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="normal-page">
<div class="container">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-3">
<div class="vote-container">
<i class="fa fa-handshake-o fa-3x vote-fa" aria-hidden="true"></i>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur eu risus vitae metus rhoncus tincidunt eu a lorem.</p><br>
<a href="#">Click here to vote!</a>
</div>
</div>
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-3">
<div class="vote-container">
<i class="fa fa-superpowers fa-3x vote-fa" aria-hidden="true"></i>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur eu risus vitae metus rhoncus tincidunt eu a lorem.</p><br>
<a href="#">Click here to vote!</a>
</div>
</div>
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-3">
<div class="vote-container">
<i class="fa fa-superpowers fa-3x vote-fa" aria-hidden="true"></i>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur eu risus vitae metus rhoncus tincidunt eu a lorem.</p><br>
<a href="#">Click here to vote!</a>
</div>
</div>
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-3">
<div class="vote-container">
<i class="fa fa-superpowers fa-3x vote-fa" aria-hidden="true"></i>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur eu risus vitae metus rhoncus tincidunt eu a lorem.</p><br>
<a href="#">Click here to vote!</a>
</div>
</div>
</div>
</div>
</div>

Answer 1

您需要修复width和height并使用text-align:center和line-height将其居中，并且要使圆角边框需要添加border-radius:50%;

注意：line-height需要等于height才能垂直居中

请参阅工作示例：

.normal-page {
padding-top: 30px;
}
body .normal-page {
z-index: 998;
position: relative;
padding-bottom: 10px;
background: url(../images/tpbg.jpg) top center no-repeat #141416;
border: 1px solid #000;
border-top: 0;
min-height: 500px;
}
.container {
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
.vote-container {
text-align: center;
padding-left: 30px;
padding-right: 30px;
color: #fff;
}
i.vote-fa {
color: #ff8800;
margin-bottom: 20px;
background: #861515;
width: 80px;
height: 80px;
border-radius: 50%;
text-align: center;
line-height: 80px;
border:1px solid #ff8800;
}
.vote-container a {
cursor: pointer;
}

<link href="https://netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="normal-page">
<div class="container">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-3">
<div class="vote-container">
<i class="fa fa-handshake-o fa-3x vote-fa" aria-hidden="true"></i>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur eu risus vitae metus rhoncus tincidunt eu a lorem.</p><br>
<a href="#">Click here to vote!</a>
</div>
</div>
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-3">
<div class="vote-container">
<i class="fa fa-superpowers fa-3x vote-fa" aria-hidden="true"></i>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur eu risus vitae metus rhoncus tincidunt eu a lorem.</p><br>
<a href="#">Click here to vote!</a>
</div>
</div>
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-3">
<div class="vote-container">
<i class="fa fa-superpowers fa-3x vote-fa" aria-hidden="true"></i>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur eu risus vitae metus rhoncus tincidunt eu a lorem.</p><br>
<a href="#">Click here to vote!</a>
</div>
</div>
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-3">
<div class="vote-container">
<i class="fa fa-superpowers fa-3x vote-fa" aria-hidden="true"></i>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur eu risus vitae metus rhoncus tincidunt eu a lorem.</p><br>
<a href="#">Click here to vote!</a>
</div>
</div>
</div>
</div>
</div>

Answer 2

这很容易。 只需使用 flex，它就可以作为魅力

.fa {
width: 100px;
height: 100px;
border: 2px solid #fff;
border-radius: 100%;
display: flex;
justify-content: center;
align-items: center;
}

我也更新了你的代码片段。

.normal-page {
padding-top: 30px;
}
body .normal-page {
z-index: 998;
position: relative;
padding-bottom: 10px;
background: url(../images/tpbg.jpg) top center no-repeat #141416;
border: 1px solid #000;
border-top: 0;
min-height: 500px;
}
.container {
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
.vote-container {
text-align: center;
padding-left: 30px;
padding-right: 30px;
color: #fff;
}
.vote-fa {
color: #ff8800;
margin-bottom: 20px;
}
.vote-container a {
cursor: pointer;
}
/* add these lines */
.fa {
width: 100px;
height: 100px;
border: 2px solid #fff;
border-radius: 100%;
display: flex;
justify-content: center;
align-items: center;
}

<link href="https://netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="normal-page">
<div class="container">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-3">
<div class="vote-container">
<i class="fa fa-handshake-o fa-3x vote-fa" aria-hidden="true"></i>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur eu risus vitae metus rhoncus tincidunt eu a lorem.</p><br>
<a href="#">Click here to vote!</a>
</div>
</div>
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-3">
<div class="vote-container">
<i class="fa fa-superpowers fa-3x vote-fa" aria-hidden="true"></i>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur eu risus vitae metus rhoncus tincidunt eu a lorem.</p><br>
<a href="#">Click here to vote!</a>
</div>
</div>
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-3">
<div class="vote-container">
<i class="fa fa-superpowers fa-3x vote-fa" aria-hidden="true"></i>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur eu risus vitae metus rhoncus tincidunt eu a lorem.</p><br>
<a href="#">Click here to vote!</a>
</div>
</div>
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-3">
<div class="vote-container">
<i class="fa fa-superpowers fa-3x vote-fa" aria-hidden="true"></i>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur eu risus vitae metus rhoncus tincidunt eu a lorem.</p><br>
<a href="#">Click here to vote!</a>
</div>
</div>
</div>
</div>
</div>

Answer 3

基本思想是为图标元素设置背景色，赋予它border-radius: 50%(使角圆形或圆角)，text-align: center;使图标居中对齐。

最后，为:before伪类提供一个等于元素高度的line-height，以垂直对齐图标。

以下是相关的 CSS：

.vote-fa {
background-color: #ffffff;
color: #ff8800;
height: 80px;
width: 80px;
text-align: center;
border-radius: 50%;
margin-bottom: 20px;
}
.vote-fa:before {
line-height: 80px;
}

.normal-page {
padding-top: 30px;
}
body .normal-page {
z-index: 998;
position: relative;
padding-bottom: 10px;
background: url(../images/tpbg.jpg) top center no-repeat #141416;
border: 1px solid #000;
border-top: 0;
min-height: 500px;
}
.container {
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
.vote-container {
text-align: center;
padding-left: 30px;
padding-right: 30px;
color: #fff;
}
.vote-fa {
background-color: #ffffff;
color: #ff8800;
height: 80px;
width: 80px;
text-align: center;
border-radius: 50%;
margin-bottom: 20px;
}
.vote-fa:before {
line-height: 80px;
}
.vote-container a {
cursor: pointer;
}

<link href="https://netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="normal-page">
<div class="container">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-3">
<div class="vote-container">
<i class="fa fa-handshake-o fa-3x vote-fa" aria-hidden="true"></i>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur eu risus vitae metus rhoncus tincidunt eu a lorem.</p><br>
<a href="#">Click here to vote!</a>
</div>
</div>
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-3">
<div class="vote-container">
<i class="fa fa-superpowers fa-3x vote-fa" aria-hidden="true"></i>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur eu risus vitae metus rhoncus tincidunt eu a lorem.</p><br>
<a href="#">Click here to vote!</a>
</div>
</div>
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-3">
<div class="vote-container">
<i class="fa fa-superpowers fa-3x vote-fa" aria-hidden="true"></i>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur eu risus vitae metus rhoncus tincidunt eu a lorem.</p><br>
<a href="#">Click here to vote!</a>
</div>
</div>
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-3">
<div class="vote-container">
<i class="fa fa-superpowers fa-3x vote-fa" aria-hidden="true"></i>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur eu risus vitae metus rhoncus tincidunt eu a lorem.</p><br>
<a href="#">Click here to vote!</a>
</div>
</div>
</div>
</div>
</div>

Answer 4

您需要用div 标签包装图标

在这里，您可以使用此代码。

它可能对你有帮助。

.normal-page {
padding-top: 30px;
}
body .normal-page {
z-index: 998;
position: relative;
padding-bottom: 10px;
background: url(../images/tpbg.jpg) top center no-repeat #141416;
border: 1px solid #000;
border-top: 0;
min-height: 500px;
}
.container {
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
.vote-container {
text-align: center;
padding-left: 30px;
padding-right: 30px;
color: #fff;
}
.vote-fa {
color: #ff8800;
margin-bottom: 20px;
}
.vote-container a {
cursor: pointer;
}
.vote-container .icons {
border-radius: 50%;
height: 65px;
width: 65px;
border: 2px solid #fff;
line-height: 60px;
margin-bottom: 10px;
}
.vote-container .icons i {
line-height: 60px;
}

<link href="https://netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="normal-page">
<div class="container">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-3">
<div class="vote-container">
<div class="icons">
<i class="fa fa-handshake-o fa-3x vote-fa" aria-hidden="true"></i>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur eu risus vitae metus rhoncus tincidunt eu a lorem.</p><br>
<a href="#">Click here to vote!</a>
</div>
</div>
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-3">
<div class="vote-container">
<div class="icons">
<i class="fa fa-superpowers fa-3x vote-fa" aria-hidden="true"></i>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur eu risus vitae metus rhoncus tincidunt eu a lorem.</p><br>
<a href="#">Click here to vote!</a>
</div>
</div>
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-3">
<div class="vote-container">
<div class="icons">
<i class="fa fa-superpowers fa-3x vote-fa" aria-hidden="true"></i>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur eu risus vitae metus rhoncus tincidunt eu a lorem.</p><br>
<a href="#">Click here to vote!</a>
</div>
</div>
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-3">
<div class="vote-container">
<div class="icons">
<i class="fa fa-superpowers fa-3x vote-fa" aria-hidden="true"></i>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur eu risus vitae metus rhoncus tincidunt eu a lorem.</p><br>
<a href="#">Click here to vote!</a>
</div>
</div>
</div>
</div>
</div>

Answer 5

不要使用 Font Awesome 类 "3x"，因为如果它必须与其他代码一起使用，它并不总是很适合。 将图标放在带有圆角的div 中，并将行高设置为等于div 高度，然后您可以在此处设置字体大小(只需像 fa-3x 一样放置 3em)。

.normal-page {
padding-top: 30px;
}
body .normal-page {
z-index: 998;
position: relative;
padding-bottom: 10px;
background: url(../images/tpbg.jpg) top center no-repeat #141416;
border: 1px solid #000;
border-top: 0;
min-height: 500px;
}
.container {
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
.vote-container {
text-align: center;
padding-left: 30px;
padding-right: 30px;
color: #fff;
}
.vote-fa {
color: #ff8800;
}
.vote-container a {
cursor: pointer;
}
.circle {
width: 70px;
height: 70px;
line-height: 70px;
text-align: center;
border-radius: 35px;
background: #fff;
margin-bottom: 20px;
font-size: 3em;
}

<link href="https://netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="normal-page">
<div class="container">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-3">
<div class="vote-container">
<div class="circle"><i class="fa fa-handshake-o vote-fa" aria-hidden="true"></i></div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur eu risus vitae metus rhoncus tincidunt eu a lorem.</p><br>
<a href="#">Click here to vote!</a>
</div>
</div>
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-3">
<div class="vote-container">
<div class="circle"><i class="fa fa-superpowers vote-fa" aria-hidden="true"></i></div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur eu risus vitae metus rhoncus tincidunt eu a lorem.</p><br>
<a href="#">Click here to vote!</a>
</div>
</div>
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-3">
<div class="vote-container">
<div class="circle"><i class="fa fa-superpowers vote-fa" aria-hidden="true"></i></div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur eu risus vitae metus rhoncus tincidunt eu a lorem.</p><br>
<a href="#">Click here to vote!</a>
</div>
</div>
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-3">
<div class="vote-container">
<div class="circle"><i class="fa fa-superpowers vote-fa" aria-hidden="true"></i></div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur eu risus vitae metus rhoncus tincidunt eu a lorem.</p><br>
<a href="#">Click here to vote!</a>
</div>
</div>
</div>
</div>
</div>

Answer 6

http://jsfiddle.net/Parthoghsh820/rm7zhLv1/1/

<span>Please refer the above fiddle</span>

[https://codepen.io/ParthoGhosh/pen/mwjpgv

<span>and the Codepen for your ref</span>