做一行文本元素有正方形色的背景

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

并且，对于＆＃34;的垂直对齐，试试这个＆＃34; 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只是随意的。只要方形高度/宽度大于文字，容器高度大于方形高度，你应该是好的。