2016-07-24 17 views
3

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

<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のような人を知っている)へのリンクです表示を適用する:それらのすべてにインライン。あなたがテーブルにあなたの見通しの名前とアイコンを置くことを試みることができる

+0

は、ここで私が求めるしようとしているものの画像へのリンクです:http://i.imgur.com/tX7Tf4c.png – CrumrineCoder

+0

は、アイコンではない問題であり、中心?ブートストラップの列は動作しています。 – Toby

+0

あなたは 'col-md- *'を使用しています。これは992ピクセル以上の画面にのみ適用されます。あなたがそれを知っていたかどうかはわかりません。 – Toby

答えて

0

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

<table> 
    <tr bgcolor="#FF0000"> 
    <th>Mon</th> 
    <th>T</th> 
    </tr> 
    <tr> 
    <td>icon</td> 
    <td>icon</td> 
    </tr> 
</table> 
をテキストとアイコンを中央にテーブルの行にクラスやIDを追加することができます
+0

https://codepen.io/CrumrineCoder/pen/grzWqr?editors=1100私はこれを試しましたが、うまくいかなかったようです。私はそれを間違っているのですか?申し訳ありませんが、私は比較的新しいWeb開発者です。私はあまりにも多くのポジショニングを掘り下げませんでした。 – CrumrineCoder

0

これはしばらくの間、私はそれを解決しました。彼らはすべて整列していますが、実際にはあまり離れていませんが、うまくいくと思います。ここでは、関連する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%; 
}