固定されたdivに画像を整列させて配置する

Question

私は固定フッタ付きの非常に単純なページを持っています。このフッタには、5つの画像を等間隔の中心に配置したいと思います。ここで

は私のHTML/CSSです：
フッターのdiv：

div.fixed { 
    position: fixed; 
    bottom: 0; 
    right: 0; 
    width: 100%; 
    height: 9%; 
    background-color: pink; 
} 

そしてHTML：

<div class="fixed"> 
    <img style="max-width: 80%; margin-left: auto; margin-right: auto; max-height: 80%;" src="images/icons/icon.png"> 
    <img style="max-width: 80%; margin-left: auto; margin-right: auto; max-height: 80%;" src="images/icons/icon.png"> 
    <img style="max-width: 80%; margin-left: auto; margin-right: auto; max-height: 80%;" src="images/icons/icon.png"> 
    <img style="max-width: 80%; margin-left: auto; margin-right: auto; max-height: 80%;" src="images/icons/icon.png"> 
    <img style="max-width: 80%; margin-left: auto; margin-right: auto; max-height: 80%;" src="images/icons/icon.png"> 
</div> 

は、ここで私が得るものです：

私は赤いアイコンを表示したいセンター。 '％'値を使用してディスプレイ解像度に応じて応答する必要があります。 フッターでグリッドをすることを考えました。しかし、より簡単な方法がありますか？ ウェブ上でこれについて何も見つかりませんでした。重複していないことを願っています！ ご協力いただきありがとうございます！

Answer 1

text-align: centerをfixed divに追加することができます。

div.fixed { 
 
    position: fixed; 
 
    bottom: 0; 
 
    right: 0; 
 
    width: 100%; 
 
    height: 9%; 
 
    background-color: pink; 
 
    text-align: center; 
 
}

<div class="fixed"> 
 
    <img src="images/icons/icon.png"> 
 
    <img src="images/icons/icon.png"> 
 
    <img src="images/icons/icon.png"> 
 
    <img src="images/icons/icon.png"> 
 
    <img src="images/icons/icon.png"> 
 
</div>

Answer 2

div.fixed { 
    position: fixed; 
    bottom: 0; 
    right: 0; 
    width: 100%; 
    height: 9%; 
    background-color: pink; 
    text-align: center 

} 


img 
{ 
    display:inline-block; 
} 

Answer 3

div.fixed { 
 
    position: fixed; 
 
    bottom: 0; 
 
    right: 0; 
 
    width: 100%; 
 
    height: 9%; 
 
    background-color: pink; 
 
    text-align: center; 
 
} 
 
div.fixed >img{ 
 
    max-width: 80%; 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
    max-height: 80%; 
 
}

<div class="fixed"> 
 
    <img src="images/icons/icon.png"> 
 
    <img src="images/icons/icon.png"> 
 
    <img src="images/icons/icon.png"> 
 
    <img src="images/icons/icon.png"> 
 
    <img src="images/icons/icon.png"> 
 
</div>

Answer 4

ちょうどあなたが使用することができ、親div.fixed

Answer 5

にtext-align: center;を追加子アイテムを中央に、水平に等間隔に配置するにはを使用します。

div.fixed { 
    position: fixed; 
    bottom: 0; 
    right: 0; 
    width: 100%; 
    height: 9%; 
    background-color: pink; 
    display: flex; //Set display to flex 
    justify-content : space-around; //space equally horizontally 
    align-items: center; //place at center vertically 
} 

あなたのケースでは、すなわち<img>子要素に余分なスタイリングを与える必要はありません。 Flexboxはアラインメントを処理し、ほとんどのブラウザで非常にうまくサポートされます。