html - Making a row of text elements with square colored background

Question

By using HTML and CSS only, I would like to make a row of text (single-letter) elements where each letter is both vertically and horizontally centered on a square colored background. Something like this:

I tried with: http://jsfiddle.net/63PQa/, but the background is not a square and positioning of the letter seems to be slightly off the center vertically even with vertical-align: middle.

In addition, I am wrapping this row of elements within a div, and this div is used inside (CSS or HTML) table, so there can't be any funky margin stuff which may affect its vertical centering inside a cell.

I only need to support major modern browsers, e.g. FF, Chrome, Safari 5+, Opera 11+ and 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 是任意的。只要正方形的高度/宽度大于文本，并且容器高度大于正方形高度，就可以了。