2016-08-02 9 views
0

私のソーシャルメディアのボタンを自分のウェブサイトのフッタに左右に揃えることができません。私は何が間違っているのか分からない、誰でも助けてくれる?フッタに物を揃える方法

私はこれは私が持っているものであり、それはないすべてが中心でありmargin-leftmargin-rightfloat: leftfloat: 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; 
} 
+0

Hiya、誰かが[fontawesome](https://fontawesome.io/icons/)どの船あなたが使用することができ、すでにあなたの質問に答えていると、ちょうどあなたがまだ気づいていなかった場合、あなたが知っているように思えますウィットhブートストラップまたはブートストラップglyphiconsクラスを使用して、ソーシャルメディアアイコンを挿入します。テキストとして挿入するので、スタイルをもっと簡単にできます( 'text-align'や' font-size'などのことができます)。 –

答えて

0

あなたはおそらく正しい要素にスタイルを設定しませんでした。

あなたはこのようにそれを行う場合、それは動作します:あなたが右にアイテムを揃えたい場合にはあなたが、あなたのCSSで新しいスタイルを設定する必要があり、ここで

#contact a{ 
    float: left; 
} 

https://jsfiddle.net/hw3odrba/

+0

ありがとうございました!あなたのために助けている:) – ctapn1307

+1

私は助けてうれしいです。問題が解決した場合は、緑色のチェックマークをクリックして回答を受け入れることを検討してください。 – jakob

0

#contact a{ 
    float: right; 
} 
関連する問題