내 웹 사이트의 바닥 글에 내 소셜 미디어 버튼이 왼쪽이나 오른쪽으로 정렬되지 않습니다. 내가 뭘 잘못하고 있는지 모르겠다. 아무도 도와 줄 수 없니?바닥 글에서 물건 정렬 방법
나는 시도 margin-left
, margin-right
, float: left
, float: right
이 내가 가진 무엇이며이하는 모든 센터입니다.
HTML
<footer class="container-fluid text-center">
<div class="row" id="contact">
<p class="col-sm-4"></p>
<h1>Reach me here</h1>
<br>
<br>
<a href="https://twitter.com/Aarons_coding" target="_blank">
<img src="images/twitter.png" alt="twitter" id="twitt">
<br/> Follower me
</a>
<a href='https://www.facebook.com/freelancecoding/posts/1534409766779543' target="_blank">
<img src="images/fb.png" alt="fb" id="fb">
<br/>Like Me on FB
</a>
<a href='https://www.linkedin.com/in/aaron-s-706193125' target="_blank">
<img src="images/link.png" alt="linkedin" id="link">
<br/>Connect with me
</a>
</div>
<ul>
<li><a href="#top">Top</a></li>
<li><a href="#design">About the Designer</a></li>
</ul>
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d401398.0917589909!2d-85.9569564028764!3d38.18847214627973!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x88690b1ab35bd511%3A0xd4d3b4282071fd32!2sLouisville%2C+KY!5e0!3m2!1sen!2sus!4v1470171263135"
width="350" height="250" frameborder="0" style="border:0" allowfullscreen></iframe>
<div style="clear: both"></div>
</footer>
CSS
#twitt {
width: 95px;
height: 95px;
margin: 5px 5px 0 18px;
}
#fb {
width: 95px;
height: 95px;
margin: 5px 0 5px;
}
#link {
width: 95px;
height: 95px;
margin: 5px 5px 0 5px;
}
footer {
background-color: rgba(0, 0, 0, 1);
font-size: 12px;
padding: 20px 0;
text-align: center;
}
footer .col-sm-4 {
display: flex;
justify-content: flex-end;
}
footer ul {
float: right;
text-align: right;
list-style: none;
}
footer li img {
width: 32px;
height: 32px;
}
안녕하세요, 누군가 이미 질문에 답변 한 것 같습니다. 그러나 이미 알고 계시지 만 알려 주시면 [fontawesome] (https://fontawesome.io/icons/)을 사용할 수 있습니다. 재치 h bootstrap 또는 부트 스트랩 glyphicons 클래스를 사용하여 소셜 미디어 아이콘을 삽입 할 수 있습니다. 텍스트로 삽입하기 때문에 스타일을 훨씬 쉽게 할 수 있습니다 ('text-align' 또는'font-size'와 같은 것을 할 수 있습니다). –