制作一行具有方形彩色背景的文本元素

Question

仅使用 HTML 和 CSS，我想制作一行文本（单字母）元素，其中每个字母在方形彩色背景上垂直和水平居中。像这样的东西：

我尝试使用： http: //jsfiddle.net/63PQa/，但背景不是正方形，即使使用 ，字母的位置似乎在垂直方向上也稍微偏离中心vertical-align: middle。

此外，我将这行元素包装在一个 div 中，并且该 div 在（CSS 或 HTML）表格内使用，因此不能有任何可能影响其在单元格内垂直居中的时髦边距内容。

我只需要支持主要的现代浏览器，例如 FF、Chrome、Safari 5+、Opera 11+ 和 IE 9+

Answer 1

我想我明白了：

.square {
    text-align: center;
    font-size: 1.3em;
    color: white;
    background: #5bb75b;
    display: inline-block;
    height: 30px;
    line-height:30px;
    width: 30px;
}

并且，对于 jsfiddle 中“尝试这个”文本的垂直对齐：

.container {
  height: 50px;
  line-height: 50px;
  // the rest as you have it
}

如果您可以容忍硬设置高度和宽度，那就是。您需要inline-block让浏览器遵守height某个width元素span。需要line-height使垂直居中工作。

vertical-align...我刚刚摆脱了它。添加后好像没有什么效果line-height。

30px 和 50px 是任意的。只要正方形的高度/宽度大于文本，并且容器的高度大于正方形的高度，就可以了。