居中项目在上面的项目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

回答

相关问题