div内のアイテムを他のdivの中央に配置

Question

6個のアイコンの上に6個のテキストの行を配置して、最初のテキストが最初のアイコンの上に表示されるようにしようとしています。私はここに新しいので、画像を投稿しないでください。

<div id="forecast"> 
    <!-- Naming convention starts with today as Sunday, because reasons --> 
    <div id="names" class="row"> 
    <div id="mon" class="col-md-2"> Mon </div> 
    <div id="tues" class="col-md-2"> Tues </div> 
    <div id="wed" class="col-md-2"> Wed </div> 
    <div id="thur" class="col-md-2"> Thur </div> 
    <div id="fri" class="col-md-2"> Fri </div> 
    <div id="sat" class="col-md-2"> Sat </div> 
    </div> 
    <!-- End of names --> 

    <div id="forecast-icons" class="row"> 
    <div id="mon-icon" class="col-md-2"> </div> 
    <div id="tues-icon" class="col-md-2"> </div> 
    <div id="wed-icon" class="col-md-2"> </div> 
    <div id="thur-icon" class="col-md-2"> </div> 
    <div id="fri-icon" class="col-md-2"> </div> 
    <div id="sat-icon" class="col-md-2"> </div> 

    </div> 
    <!-- forecast icons --> 

ブートストラップは、アイコンには影響しない、と私はなぜわからない：ここでは

はHTMLです。これに対処するために、私はpadding-left：をパーセンテージと生の数字の両方で追加しようとしましたが、それらは機能しませんでした。生の数字はできますが、STUPID量のブレークポイントが必要です。

私も試しました：#names、＃forecast-icons {display：flex;屈曲方向：行; justify-content：center; }

しかし、アイコンはすべて中央に集まっていました。 https://codepen.io/CrumrineCoder/pen/EyLmoZ?editors=1100

をそしてここで、フルページビューです：

https://codepen.io/CrumrineCoder/pen/EyLmoZ?editors=1100

私はそれらすべてを持っている行のことではここ

はcodepen（私は、申し訳ありませんここにjsfiddleのような人を知っている）へのリンクです表示を適用する：それらのすべてにインライン。あなたがテーブルにあなたの見通しの名前とアイコンを置くことを試みることができる

Answer 1

これは彼らがお互いの下にやや適切に揃える確認する必要がありますが、まだ多くのapproperiatly

<table> 
    <tr bgcolor="#FF0000"> 
    <th>Mon</th> 
    <th>T</th> 
    </tr> 
    <tr> 
    <td>icon</td> 
    <td>icon</td> 
    </tr> 
</table> 

をテキストとアイコンを中央にテーブルの行にクラスやIDを追加することができます

Answer 2

これはしばらくの間、私はそれを解決しました。彼らはすべて整列していますが、実際にはあまり離れていませんが、うまくいくと思います。ここでは、関連するCSSです：

#names > div { 
display: inline; 
font-size: 20px; 
} 
#names{ 
    text-align: center; 
} 
#forecast-icons > div { 
    font-size: 30px; 

} 
#forecast-icons{ 
    text-align: center; 
    display: block; 
    width: 100%; 
}