javascript - 如何通过 css 将 Skycon 的图标居中？

Question

我为免费代码营制作了这个天气应用程序，我决定使用 Skycons 的一些图标:http://darkskyapp.github.io/skycons/

但是，无论我多么努力，我都无法更改页面上图标的对齐方式。

如何让包含图标的 div 居中？我尝试制作两个 col-xs-6:一个天气向右对齐，另一个图标向左对齐，但无论我尝试什么，图标都不会移动。

这些是我想要对齐的两个元素:

<div id = "weather"></div> 
<div class ="pass"><canvas id = "clear-day" height = "24"></canvas></div>

这是我的代码笔:

https://codepen.io/Thiagoral/pen/BQXOvW

Answer 1

要使 Canvas 的图标按照描述居中，您应该将 text-align:center 应用于父元素。

.body {
    text-align:center;
}

应用溶液的 fork 笔: https://codepen.io/anon/pen/MbNPER