javascript - 在固定位置 Div 中水平居中文本

Question

我在下面的 div 中有文本，但我似乎无法让它居中对齐:

<div class="banner_tron">
            <div class="bg-box-100-grey">
                    <span class="SansFontBold ex-lrg-60 center color-white">Hello World</span>
                    <div class="div-wrapper">
                    <p class="SansFontBold ex-lrg-20 center color-white">Have a Wonderful Day</p>
                    </div>
            </div>
        </div>

此代码的 CSS 如下:

.banner_tron{
  bottom: 0;
  height: 150px;
  left: 0;
  margin: auto;
  position: absolute;
  top: 0;
  width: 300px;
  white-space: nowrap;
}     
   .center {
    margin-left: auto;
    margin-right: auto;
    margin-top: auto;
    margin-bottom:auto;
    } 

/* background-boxing */
.bg-box-100-grey{
    position: fixed;
    left: 0;
    right:0;
    width: 100%;
    background-color:  rgba(108,108,108, .7);
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border: none;
}
.ex-lrg-60 {
    font-size: 60px;
    font-weight: bold;
}

我已经为 .center 类尝试了几种不同的建议，但似乎没有任何效果(javascript 定位、对齐元素和 webkit 转换)。关于为什么这不起作用以及我可以做些什么来解决它的任何建议？

Answer 1

将 text-align:center 添加到您的 .banner_tron

.banner_tron{
  bottom: 0;
  height: 150px;
  left: 0;
  margin: auto;
  position: absolute;
  top: 0;
  width: 300px;
  white-space: nowrap;
  text-align:center;
}     
   .center {
    margin-left: auto;
    margin-right: auto;
    margin-top: auto;
    margin-bottom:auto;
    } 

/* background-boxing */
.bg-box-100-grey{
    position: fixed;
    left: 0;
    right:0;
    width: 100%;
    background-color:  rgba(108,108,108, .7);
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border: none;
}
.ex-lrg-60 {
    font-size: 60px;
    font-weight: bold;
}

<div class="banner_tron">
  <div class="bg-box-100-grey">
    <span class="SansFontBold ex-lrg-60 color-white">Hello World</span>
    <div class="div-wrapper">
      <p class="SansFontBold ex-lrg-20 center color-white">Have a Wonderful Day</p>
    </div>
  </div>
</div>

希望对您有所帮助:)