首页 文章

如何使Bootstrap社交图标居中？

提问于
浏览 次
-1

如何将这些社交媒体图标放置在页脚中心？我尝试过text-align和margin-left和margin-right auto . 当我打开文件时，四个图标位于页面的左下角 .

这是我的完整HTML文件，底部是Bootstrap内容 .

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="social-btns">
  <a type="button" class="btn-floating btn-lg btn-fb"><i class="fa fa-facebook"></i></a>
  <a type="button" class="btn-floating btn-lg btn-email"><i class="fa fa-envelope"></i></a>
  <a type="button" class="btn-floating btn-lg btn-git"><i class="fa fa-github"></i></a>
  <a type="button" class="btn-floating btn-lg btn-tw"><i class="fa fa-twitter"></i></a>
</div>

Screen shot

html css twitter-bootstrap font-awesome

3 回答

  • 1

    您只能通过css属性text-align：center设置social-btns类 .

    请查看以下代码段以获取更多详细信息 . 快乐的编码！

    <!DOCTYPE html>
<html lang="en" dir="ltr">
 <head>
 <meta charset="utf-8">
  <style>
    .social-btns{
      text-align: center;
     }
  </style>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
 </head>
 <body>
  <div class="social-btns">
   <a type="button" class="btn-floating btn-lg btn-fb"><i class="fa fa-facebook"></i></a>
   <a type="button" class="btn-floating btn-lg btn-email"><i class="fa fa-envelope"></i></a>
   <a type="button" class="btn-floating btn-lg btn-git"><i class="fa fa-github"></i></a>
   <a type="button" class="btn-floating btn-lg btn-tw"><i class="fa fa-twitter"></i></a>
  </div>
 </body>
</html>
    回复于
  • 1

    将类文本中心添加到social-btns section.text-center已经在bootstrap中预定义 .

    <!DOCTYPE html>
<html lang="en" dir="ltr">
 <head>
 <meta charset="utf-8">
   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
 </head>
 <body>
  <div class="social-btns text-center">
   <a type="button" class="btn-floating btn-lg btn-fb"><i class="fa fa-facebook"></i></a>
   <a type="button" class="btn-floating btn-lg btn-email"><i class="fa fa-envelope"></i></a>
   <a type="button" class="btn-floating btn-lg btn-git"><i class="fa fa-github"></i></a>
   <a type="button" class="btn-floating btn-lg btn-tw"><i class="fa fa-twitter"></i></a>
  </div>
 </body>
</html>
    回复于
  • 2

    只需为div标签添加 text-center 类 . 它是一个以文本为中心的引导类 .

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<div class="social-btns text-center">
  <a type="button" class="btn-floating btn-lg btn-fb"><i class="fa fa-facebook"></i></a>
  <a type="button" class="btn-floating btn-lg btn-email"><i class="fa fa-envelope"></i></a>
  <a type="button" class="btn-floating btn-lg btn-git"><i class="fa fa-github"></i></a>
  <a type="button" class="btn-floating btn-lg btn-tw"><i class="fa fa-twitter"></i></a>
</div>
    回复于

相关问题