Question

是否有一些很好的方法可以制作一个包含一个字符的正方形，并让该字符在中心对齐并在中间对齐。

就像＆＃39; +＆＃39;周围的小绿框一样。角色（＆＃34;好＆＃34;，红色＆＃39; - ＆＃39;＆＃34;坏＆＃34;或蓝色＆＃39;我＆＃39;＆＃34;＆＃34;信息＆＃ 34。）

我想问题的一部分是在大多数浏览器/操作系统中使用相同大小的字体。另一个如何填充它以使其成为正方形，并且角色居中于其中。

尝试将width，height和line-height设置为1 em，但是＆＃39; +＆＃39;结束了一点点，并且在chrome和firefox中有不同的数量，替换＆＃39; +＆＃39;带有重型加号＆＃39; U + 2795在浏览器之间的差异较小，但猜测它可能会使操作系统之间的差异更小。

目前我有

＆＃13;

.pros_icon
{
	float: left;
	text-align: center;
	height: 1em;
	height: calc(1em + 2px);
	width: 1em;
	width: calc(1em + 2px);
	font-size: 20px;
	line-height: 1em;
	font-weight: bold;

	border: solid black 1px;
	color: white;
	background: green;
}

＆＃13;

<span class="pros_icon"> ➕ </span>

＆＃13;

（或者我应该使用svg图像）

Answer 1

您可以移除float:left和line-height: 1em;并使用填充

＆＃13;

.pros_icon
{
    //float: left;
    text-align: center;
    height: 1em;
    height: calc(1em + 2px);
    width: 1em;
    width: calc(1em + 2px);
    font-size: 20px;
    //line-height: 1em;
    font-weight: bold;

    border: solid black 1px;
    color: white;
    background: green;
    padding:5px;
}

＆＃13;

<span class="pros_icon"> ➕ </span>

＆＃13;

Answer 2

我修改了我的答案。下面应该是固定高度/宽度的最少代码量。如果您有一个具有不同高度/宽度的非对称和/或奇形状符号，您可以使用线高度来垂直居中

＆＃13;

#char-box {
  width:40px;
  height:40px;
  background-color:lightblue;
  line-height:40px;
  text-align: center;
}

＆＃13;

<div id="char-box">O</div>

＆＃13;

Answer 3

试试这个。

＆＃13;

.good,
.bad,
.info {
  width: 1.5em;
  height: 1.5em;
  line-height: 1.5em;
  display: inline-block;
  text-align: center;
  color: white;
  font-weight: bold;
  font-family: calibri;
  margin-right: 20px;
}
.good {
  background-color: forestgreen;
  border: 1px solid darkgreen;
}
.bad {
  background-color: coral;
  border: 1px solid darkred;
}
.info {
  background-color: cornflowerblue;
  border: 1px solid darkblue;
}

＆＃13;

<span class="good">+</span>
<span class="bad">-</span>
<span class="info">i</span>

＆＃13;

Answer 4

试试这个代码段

.pros_icon {
  text-align: center;
  height: 20px;
  width: 20px;
  font-size: 26px;
  font-weight: bold;
  line-height: 0.9;
  border: solid black 1px;
  color: white;
  display: inline-block;
  font-family: sans-serif;
  padding: 3px;
}
.success {
  background: green;
}
.bad {
  background: red;
}
.info {
  background: blue;
}

<span class="pros_icon success">&plus;</span>
<span class="pros_icon bad">&minus;</span>
<span class="pros_icon info">i</span>

这是一种替代方式。试试这个fiddle

如何创建1个char方块

4 个答案: