부트 스트랩 푸터 : 사회 미디어 아이콘 중심에 문제가 있음

Question

나는 한 시간 이상 소셜 미디어 아이콘을 중심에두고 있으며 아무데도 가지 않는 것처럼 보인다. 다음은 HTML 코드입니다. 아래

그리고

<footer> 
 
    <div class="container"> 
 
    <div class="row-footer"> 
 
     <div class="row row-content"> 
 
     <div class="nav navbar-nav" style="padding: 40px 10px;"> 
 
      <a class="btn btn-social-icon btn-google-plus" href="http://google.com/+"><i class="fa fa-google-plus"></i></a> 
 
      <a class="btn btn-social-icon btn-facebook" href="http://www.facebook.com/profile.php?id="><i class="fa fa-facebook"></i></a> 
 
      <a class="btn btn-social-icon btn-linkedin" href="http://www.linkedin.com/in/"><i class="fa fa-linkedin"></i></a> 
 
      <a class="btn btn-social-icon btn-twitter" href="http://twitter.com/"><i class="fa fa-twitter"></i></a> 
 
      <a class="btn btn-social-icon btn-youtube" href="http://youtube.com/"><i class="fa fa-youtube"></i></a> 
 
      <a class="btn btn-social-icon" href="mailto:"><i class="fa fa-envelope-o"></i></a> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</footer>

는 CSS의 코드입니다.

.row-footer { 
 
    background-color: #AfAfAf; 
 
    margin:200px auto; 
 
    padding: 20px 0px 20px 0px; 
 
} 
 

 
.navbar-nav { 
 
    display: inline-block; 
 
    text-align: center; 
 
}

이는 구글 크롬에 나오는 방법이다.

Answer 1

입니다.

.navbar-nav { 
    padding: 40px 10px; 
    float: none; 
    text-align: center; 
} 

예 1 :

.row-footer { 
 
    background-color: #AfAfAf; 
 
    margin: 200px auto; 
 
    padding: 20px 0px 20px 0px; 
 
} 
 
div.navbar-nav { 
 
    padding: 40px 10px; 
 
    float: none; 
 
    text-align: center; 
 
}

<link href="https://maxcdn.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" /> 
 
<footer> 
 
    <div class="container"> 
 
    <div class="row-footer"> 
 

 
     <div class="row"> 
 
     <div class="nav navbar-nav"> 
 
      <a class="btn btn-social-icon btn-google-plus" href="http://google.com/+"><i class="fa fa-google-plus"></i></a> 
 
      <a class="btn btn-social-icon btn-facebook" href="http://www.facebook.com/profile.php?id="><i class="fa fa-facebook"></i></a> 
 
      <a class="btn btn-social-icon btn-linkedin" href="http://www.linkedin.com/in/"><i class="fa fa-linkedin"></i></a> 
 
      <a class="btn btn-social-icon btn-twitter" href="http://twitter.com/"><i class="fa fa-twitter"></i></a> 
 
      <a class="btn btn-social-icon btn-youtube" href="http://youtube.com/"><i class="fa fa-youtube"></i></a> 
 
      <a class="btn btn-social-icon" href="mailto:"><i class="fa fa-envelope-o"></i></a> 
 
     </div> 
 
     </div> 
 
    </div> 
 

 
    </div> 
 
</footer>

동작 예 2 :

.row-footer { 
 
    background-color: #AfAfAf; 
 
    margin: 200px 0; 
 
} 
 
.footer-nav { 
 
    text-align: center; 
 
    padding: 40px 0; 
 
} 
 
.footer-nav a { 
 
    display: inline-block; 
 
    padding: 0 20px; 
 
}

<link href="https://maxcdn.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" /> 
 
<footer> 
 
    <div class="container"> 
 
    <div class="row"> 
 
     <div class="col-sm-12"> 
 

 
     <div class="row-footer"> 
 
      <div class="footer-nav"> 
 
      <a class="btn btn-social-icon btn-google-plus" href="#"> 
 
       <i class="fa fa-google-plus"></i> 
 
      </a> 
 
      <a class="btn btn-social-icon btn-facebook" href="#"> 
 
       <i class="fa fa-facebook"></i> 
 
      </a> 
 
      <a class="btn btn-social-icon btn-linkedin" href="#"> 
 
       <i class="fa fa-linkedin"></i> 
 
      </a> 
 
      <a class="btn btn-social-icon btn-twitter" href="#"> 
 
       <i class="fa fa-twitter"></i> 
 
      </a> 
 
      <a class="btn btn-social-icon btn-youtube" href="#"> 
 
       <i class="fa fa-youtube"></i> 
 
      </a> 
 
      <a class="btn btn-social-icon" href="#"> 
 
       <i class="fa fa-envelope-o"></i> 
 
      </a> 
 
      </div> 
 

 
     </div> 
 
     </div> 
 
    </div> 
 

 
    </div> 
 
</footer>

Answer 2

아이콘 컨테이너에 text-align:center과 결합 된 아이콘에 display: inline-block;을 사용해보세요.

아이콘보다 많은 자녀가있을 경우 다른 문자로 바꾸는 것이 좋습니다 <div>. 당신은 당신이 기본 float:left 규칙의 제거해야하는 navbar-nav 클래스를 사용하기 때문에

a { 
    display: inline-block; 
} 
.navbar-nav { 
    text-align: center; 
} 

여기 업데이트jsfiddle