Question

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

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

while (!(q->element_number == 0)) {
    printf("%s\n", q->top->element);
    delete(q);
}

Screen shot

Answer 1

您只能通过css属性text-align：center。

设置social-btns类

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

＆＃13;

<!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>

＆＃13;

Answer 2

将class text-center添加到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>

Answer 3

只需为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>

如何使Bootstrap社交图标居中？

3 个答案: