制作一排带方形彩色背景的文本元素

通过仅使用HTML和CSS，我想制作一行文字（单字母）元素，其中每个字母都是垂直和水平居中的正方形彩色背景。事情是这样的：制作一排带方形彩色背景的文本元素

enter image description here

我试着用：http://jsfiddle.net/63PQa/，但背景是不是方和信的定位似乎稍微偏离中心垂直甚至vertical-align: middle。此外，我将这行元素包装在一个div中，并且这个div用于CSS或HTML表格中，所以不能有任何时髦的边缘元素，这可能会影响它在单元格内的垂直居中。。

我只需要支持主流的现代浏览器，例如FF，Chrome浏览器，Safari 5以上，歌剧11+和IE 9

来源

2013-08-01 skyork

你能用padding：10px; padding-right：17px; padding-left：17px;例如，或者你在寻找另一种解决方案？ –

@Akinaru，我需要这些方块作为流体布局的一部分自动重新调整大小，所以我怀疑固定填充效果不好。 – skyork

我想我明白了：

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

如果你可以容忍hard-setting的高度和宽度，那就是。您需要inline-block才能让浏览器遵循span元素上的height和width。需要line-height才能获得垂直居中工作。

vertical-align ......我刚摆脱它。在添加line-height后似乎没有任何影响。

30px和50px只是任意的。只要方形的高度/宽度比文字大，容器的高度大于方形的高度，你应该是好的。

来源

2013-08-01 15:18:49

基本上就是这样 - 尽管如此，“height”，“line-height”和“width”可以设置为“1em”，而不是象素数，因为您在其他地方使用“em”。使用'padding'，如果你想... err ...填充，在正方形里面:) – Amadiere

是的，我刚刚随机选取了30px。只要它们与文本相同并且比文本更大... –

@GrantBirchmeier，谢谢你的回答，但是这使得一排盒子*与文本'Try this'不再垂直对齐*。我认为这是由于信件周围的额外填充... – skyork

制作一排带方形彩色背景的文本元素

回答

相关问题