如何使用CSS在中心对齐内容？

Question

我是CSS＆amp;尝试为SlickGrid创建我自己的自定义三态复选框编辑器，但内容的对齐方式不正确，我想将checkmark和hyphen放在正方形的中心，我尝试应用css padding: 2px至partial＆amp; checked课程，但没有帮助。

这就是它在Grid中的显示方式。

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

Answer 1

您可以使用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>

Answer 2

希望这会对你有所帮助。

＆＃13;

＆＃13;

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

＆＃13;

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

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

＆＃13;

＆＃13;

＆＃13;

Answer 3

由于这些字符/符号是字体的一部分，因此它们像字母一样对齐，即它们上方和下方可以有空格，具体取决于特定字符（字体的许多字符不同，两个字符不同）你正在使用你的例子。）

但您可以使用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>

Answer 4

您可以使用 Flexbox 执行此操作：

＆＃13;

＆＃13;

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

＆＃13;

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

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

＆＃13;

＆＃13;

＆＃13;

Answer 5

您可以使用 Flexbox 对齐中心的内容，如下所示：

    jQuery(document.body).click(function(evt){
      var clicked = evt.target;
      var currentID = clicked.id;
    })

// show the div only when the button is clicked    
    jQuery(document).on('click', function(e) {
        if ( jQuery(e.target).closest('#btn-group').length ) {
            jQuery('#pages-content').show();
        }
    });

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

Answer 6

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

Answer 7

只需更改

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