居中項目在上面的項目div在另一個div

我試圖在6圖標上面放置一行6個文本，以便第一個文本會出現在第一個圖標上方，第二個圖標上方的第二個文本等。因爲我是新來的，所以不要張貼圖片。居中項目在上面的項目div在另一個div

這裏的HTML：

<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 -->

自舉不影響圖標，我不知道爲什麼。爲了抵消這一點，我試圖添加填充 - 左：百分比和原始數字，但這些都不起作用。我可以做原始數字，但這需要一個STUPID數量的斷點。

我也試過了：#names，＃forecast-icons {display：flex; flex-direction：row; justify-content：center; }

但是，圖標都集中在中心。

這裏給codepen（我知道這裏的人喜歡的jsfiddle，抱歉）鏈接：https://codepen.io/CrumrineCoder/pen/EyLmoZ?editors=1100

這裏是一個完整的頁面視圖：

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

我把它們都在一條線上的應用顯示：內聯到所有人。

來源

2016-07-24 CrumrineCoder

下面是什麼我想要求一個圖像鏈接：http://i.imgur.com/tX7Tf4c.png – CrumrineCoder

這樣的問題：該圖標都沒有中心？引導列正在工作.. – Toby

您正在使用'col-md- *'，它只適用於寬度超過992像素的屏幕。不知道你是否知道這一點。 – Toby

你可以嘗試把你的預測名稱和圖標在表中這應該使它們對齊有點妥善下方對方你仍然可以添加類或ID的錶行居中文本和圖標更approperiatly

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

來源

2016-07-24 12:20:37 user1443063

https://codepen.io/CrumrineCoder/pen/grzWqr?editors=1100我試過了，但它似乎沒有工作。我做錯了嗎？對不起，我對web開發人員來說比較新，而且我還沒有深入研究過定位。 – CrumrineCoder

好的，所以經過一段時間的工作後，我已經修復了它...... sorta。它們都是對齊的，但並沒有真正地分開太多，但我猜想它是有效的。下面是相關的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%; 
}

來源

2016-07-24 14:16:10 CrumrineCoder

居中項目在上面的項目div在另一個div

回答

相關問題