Question

由于右侧的span，button中的文字并不完全在中间。任何帮助集中精力都将非常感激。我尝试添加div并更改显示属性无济于事。

HTML（使用Bootstrap）：

<div class="wrapper">
    <div class="myflash  alert alert-dismissable speechwarning">
        <div class="container">
            <span>This is not exactly centered</span>
            <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        </div>
    </div>
</div>

CSS：

.container {
    text-align: center;
}

Answer 1

通过声明其位置绝对，将renderer = new THREE.WebGLRenderer( { alpha: true });元素从文档的自然流中取出。
通过一些其他微小的调整，比如在包含的父元素button上声明position: relative，您应该发现现在有问题的文本是精确水平居中的，因为.container元素不再占用空间文件流程。

button

.container {
  text-align: center;
}

/* Additional */

.alert-dismissable .close.pos-absolute {
    position: absolute;
    right: -7px;
}

.container {
    position: relative;
}

Updated Fiddle

Answer 2

padding-right上还有.alert-dismissable。您可以使用!important覆盖此内容。

您还需要使用.close从文档流中取出position: absolute按钮。

.container {
  text-align: center;
  position: relative;
}

.alert-dismissable {
  padding-right: 15px !important;
}


.myflash.alert-dismissable .close {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 1em;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="wrapper">
  <div class="myflash  alert alert-dismissable speechwarning">
    <div class="container">
      <span>This <strong>is</strong> exactly centered</span>
      <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
    </div>
  </div>
</div>

当<div>右侧还有一个按钮时，如何在<div>中居中

2 个答案: