代码之家  ›  专栏  ›  技术社区  ›  Detoxical

我如何制作一个带有圆形边框的div,并使其中的fa图标居中?

centering border css html
  •  1
  • Detoxical  · 技术社区  · 9 年前

    所以我想要一个有圆形边框的div(用来做一个圆),在里面我想要我的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>
    6 回复  |  直到 9 年前
        1
  •  1
  •   Chiller    9 年前

    你需要修复 width height 和使用 text-align:center line-height border-radius:50%;

    笔记 : 身高

    参见工作示例: 

    .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>
        2
  •  0
  •   Lucian    9 年前

    这很容易。只要使用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>
        3
  •  0
  •   Brett DeWoody    9 年前

    基本思想是为图标元素设置背景色,并为其指定 border-radius: 50% (使角落呈圆形或圆形), text-align: center; 因此图标是中心对齐的。

    最后,给出 :before psuedo a级 line-height 等于元素的高度以垂直对齐图标。 

    .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>
        4
  •  0
  •   Nirav Joshi    9 年前

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

    这可能对你有帮助。 

    .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>
        5
  •  0
  •   Truerick    9 年前

    不要使用Font Awesome类“3x”,因为如果必须与其他代码一起使用,它并不总是很适合。 

    .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>
        6
  •  0
  •   Partho Ghosh    9 年前

    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>
    推荐文章
    Jamie  ·  在CSS链接的文件名中添加Jinja占位符
    1 年前
    Mass  ·  如何在Tailwind CSS v4中创建配置
    1 年前
    magenta placenta  ·  将css变量合并为一个变量
    1 年前
    ptownbro  ·  重叠分区标签,同时保持以下所有分区和内容就位
    1 年前
    Luke Frost IEng MIMechE  ·  Bootstrap 5.3在Div中的项目位置没有如我所期望的那样显示
    1 年前
    user29519291  ·  为不同的变量创建一个带有可重用Click函数的简单菜单
    1 年前
    john Rizzo  ·  按钮背景颜色、悬停和活动状态存在问题
    1 年前
    Ben Halicki  ·  带有垂直和水平滚动条的表,使用HTML/CSS/Bootstrap-5固定行和列
    1 年前
    Luckkks  ·  过渡色工作不正常
    1 年前
    ModernEraCaveman  ·  如何对齐我的Bootstrap容器以适应网页的整个宽度?
    1 年前
    关于   移动版
    代码之家 - 一站式码农服务社区
    沪ICP备11025650号