ウェブサイトのフッタにソーシャルメディアのアイコンを配置する

私はCSSとHTMLの世界でかなり新しいので、私の謝罪は進んでいます。ウェブサイトのフッタにソーシャルメディアのアイコンを配置する

私のソーシャルメディアのアイコンを自分のウェブサイトの下部に集中させるのに問題があります。彼らはフッターの真ん中に重いものを置いています。問題のスクリーンショットとその背後にあるコードが添付されています。

コードスニペット：

.page-footer { 
 
    background-color: #F06D71; 
 
    padding: 1em; 
 
}

<footer class="page-footer"> 
 
    <ul> 
 
    <img class="responsive-img" src="http://placehold.it/50x50"> 
 
    <img class="responsive-img" src="http://placehold.it/50x50"> 
 
    <img class="responsive-img" src="http://placehold.it/50x50"> 
 
    </ul> 
 
</footer>

私は、スタイルシートに "パディング下" を追加しようとしましたが、ちょうどアイコンましたむしろ少数のピクセルを上に移動するより小さくなる。

私が調べる必要のあるアドバイスや言葉は何ですか？

よろしく

出典

2016-09-05 dosebot

：ここは一例である "整列：センターでは、" あなたのために動作しませんか？ – GabMic

は廃止予定ですが、tex-align：center;今すぐ – mlegg

あなたの質問ではなく、そのイメージのあなたのコードを記述する必要があります。 – Ricky

利用フレキシボックス：

.page-footer{ 
display:flex; 
} 

.page-footer ul{ 
align-items:center; 
}

これはフッターの内側に縦にアイコンを中心に説明します。リスト内の<li>タグで囲まれたイメージをリスト項目として持つ必要があります。それらを垂直方向にうまくセンタリングしたい場合は、インライン・ブロックをリスト要素に追加し、テキスト・アラインメント・センターをその親の順序付けられていないリストに追加することもできます。最終的なコードは次のようになります。

.page-footer{ 
    display:flex; 
} 

.page-footer ul{ 
    justify-content:center; 
    text-align:center; 
} 

.page-footer ul li{ 
    display:inline-block; 
}

さらに私が気づいたことは、3つの画像すべてに同じIDを追加したことです。 IDは一意の識別子である必要があり、1つの要素でのみ使用されます。

出典

2016-09-05 21:44:40

Hereそれを行うための素晴らしいツールです。

出典

2016-09-05 21:39:15 pa7ryk

シンプルなソリューション：.page-footerのクラスのために

display: tableのプロパティを追加します。

<div>に画像タグをラップし、display: table-cellのプロパティをdivに、さらにvertical-align: middle;のプロパティに割り当てます。

これを実行すると、divの内側の要素が要素の中央に垂直に配置されます。

私がデモとして作ったJsFiddleを参照してください。

出典

2016-09-05 22:08:46

経験豊かな開発者であっても必ずしも明確ではありません。フッターにイメージだけを置いておきたい場合は、単にパディングを行うだけです。また、<ul>タグ内に<li>がありません。

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width"> 
    <title>JS Bin</title> 
    <style> 
    .footer-list-item { 
     list-style-type: none; 
     display: inline-block; 
    } 

    .footer-list { 
     padding: 50px 0; 
     background: pink; 
     text-align: center; 
    } 
    </style> 
</head> 
<body> 
    <div class="footer"> 
    <ul class="footer-list"> 
     <li class="footer-list-item"><img width="50" src="https://static.jsbin.com/images/dave.min.svg" alt="Welcome to JS Bin"></li> 
     <li class="footer-list-item"><img width="50" src="https://static.jsbin.com/images/dave.min.svg" alt="Welcome to JS Bin"></li> 
     <li class="footer-list-item"><img width="50" src="https://static.jsbin.com/images/dave.min.svg" alt="Welcome to JS Bin"></li> 
    </ul> 
    </div> 
</body> 
</html>

JSBin link

出典

2016-09-05 23:00:03

このレスポンスは少し遅れました。しかし、ありがとう、これは私の問題を修正！私はCSSのトリックでフレックスボックスを読んだ。そして、これを見て、私のcodepenのものと一緒にあなたのjsbinのリンクを使用し、それは働いた！ :) – dosebot

ウェブサイトのフッタにソーシャルメディアのアイコンを配置する

答えて

関連する問題