代码之家 › 专栏 › 技术社区 › Murtuza Z

如何使用CSS在center中对齐内容?

css html

Murtuza Z · 技术社区 · 7 年前

我不熟悉CSS&尝试为创建自己的自定义三态复选框编辑器 SlickGrid 但是内容的对齐不正确,我想把 checkmark 和 hyphen 在一个正方形的中心,我尝试应用css padding: 2px 到 partial & checked 但这并没有帮助。

这是它在网格中的显示方式。

.multi-checkbox .check {
  display: inline-block;
  vertical-align: top;
  width: 15px;
  height: 15px;
  border: 1px solid #333;
  margin: 3px;
}

.multi-checkbox .check.unchecked {
  background: #fff;
}

.multi-checkbox .check.partial:after {
  content: "\2010";
}

.multi-checkbox .check.checked:after {
  content: "\2713";
}

<div class="multi-checkbox">
<span class="check partial" hidefocus="" style=""></span>
</div>

<div class="multi-checkbox">
<span class="check checked" hidefocus="" style=""></span>
</div>

7 回复 | 直到 7 年前

Nenad Vracar 7 年前

您可以使用 line-height 和 text-align: center .

.multi-checkbox .check {
  display: inline-block;
  width: 15px;
  height: 15px;
  border: 1px solid #333;
  margin: 3px;
  text-align: center;
  line-height: 15px;
}

.multi-checkbox .check.unchecked {
  background: #fff;
}

.multi-checkbox .check.partial:after {
  content: "\2010";
}

.multi-checkbox .check.checked:after {
  content: "\2713";
}

<div class="multi-checkbox">
  <span class="check partial" hidefocus="" style=""></span>
</div>

<div class="multi-checkbox">
  <span class="check checked" hidefocus="" style=""></span>
</div>

Johannes 7 年前

由于这些字符/符号是字体的一部分,因此它们像字母一样对齐,即它们的上下可以有空格,具体取决于特定字符(字体中的许多字符不同,示例中使用的两个字符不同)。

但你可以使用 text-align: center 对于水平定心和 padding 设置使所有四个边上的总和相同,以将字符上移一点。在下面的示例中,我使用了 padding: 0px 2px 4px 2px

.multi-checkbox .check {
  display: inline-block;
  width: 15px;
  height: 15px;
  border: 1px solid #333;
  margin: 3px;
  padding: 0 2px 4px 2px;
  text-align: center;
}

.multi-checkbox .check.unchecked {
  background: #fff;
}

.multi-checkbox .check.partial:after {
  content: "\2010";
}

.multi-checkbox .check.checked:after {
  content: "\2713";
}

<div class="multi-checkbox">
<span class="check partial" hidefocus="" style=""></span>
</div>

<div class="multi-checkbox">
<span class="check checked" hidefocus="" style=""></span>
</div>

Troyer 7 年前

您可以使用在中心对齐内容 Flexbox公司 这样地:

.multi-checkbox .check {
  display: flex;
  align-items: center;
  align-content: center;
  justify-content: center;
  text-align: center;
  width: 15px;
  height: 15px;
  border: 1px solid #333;
  margin: 3px;
  
}

.multi-checkbox .check.unchecked {
  background: #fff;
}

.multi-checkbox .check.partial:after {
  content: "\2010";
}

.multi-checkbox .check.checked:after {
  content: "\2713";
}

<div class="multi-checkbox">
<span class="check partial" hidefocus="" style=""></span>
</div>

<div class="multi-checkbox">
<span class="check checked" hidefocus="" style=""></span>
</div>

VXp Kadir BuÅ¡atliÄ 6 年前

你可以用 Flexbox公司 :

.multi-checkbox .check {
  display: flex; /* displays flex-items (children) inline */
  justify-content: center; /* centers them horizontally */
  align-items: center; /* and vertically */
  width: 15px;
  height: 15px;
  border: 1px solid #333;
  margin: 3px;
}

.multi-checkbox .check.unchecked {background: #fff}
.multi-checkbox .check.partial:after {content: "\2010"}
.multi-checkbox .check.checked:after {content: "\2713"}

<div class="multi-checkbox">
  <span class="check partial" hidefocus="" style=""></span>
</div>

<div class="multi-checkbox">
  <span class="check checked" hidefocus="" style=""></span>
</div>

PraveenKumar 7 年前

希望这对你有帮助。

.multi-checkbox .check {
  display: inline-block;
  vertical-align: top;
  width: 15px;
  height: 15px;
  border: 1px solid #333;
  margin: 3px;
  line-height:15px;
}
.multi-checkbox .check.unchecked {
  background: #fff;
}
.multi-checkbox .check:after{
  display:block;
  text-align:center;
}
.multi-checkbox .check.partial:after {
  content: "\2010";
}
.multi-checkbox .check.checked:after {
  content: "\2713";
}

<div class="multi-checkbox">
<span class="check partial" hidefocus="" style=""></span>
</div>

<div class="multi-checkbox">
<span class="check checked" hidefocus="" style=""></span>
</div>

Ruchi 7 年前

.multi-checkbox .check {
  display: inline-block;
  width: 15px;
  border: 1px solid #333;
  margin: 3px;
  text-align: center;
}

.multi-checkbox .check.unchecked {
  background: #fff;
}

.multi-checkbox .check.partial:after {
  content: "\2010";
}

.multi-checkbox .check.checked:after {
  content: "\2713";
}

<div class="multi-checkbox">
<span class="check partial" hidefocus="" style=""></span>
</div>

<div class="multi-checkbox">
<span class="check checked" hidefocus="" style=""></span>
</div>

Ravi Ubana 7 年前

只要改变

.multi-checkbox .check {
  display: inline-block;
  width: 15px;
  height: 15px;
  border: 1px solid #333;
  margin: 3px;
  text-align: center;
  line-height: 15px;
}