我怎样才能制作一个带有圆角边框的 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%;

note: line-height needs to be equal to height to center it vertically

查看工作示例：

.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 psuedo-class 一个等于元素高度的 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 class“3x”，因为如果它必须与其他代码一起使用，它并不总是适合。将图标放在圆角的 div 内，并设置 line-height 等于 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>

我怎样才能制作一个带有圆角边框的 div 并使其中的 fa 图标居中？

How could i make a div with rounded borders and make the fa icons inside it centered?

html

css

border

centering