在固定位置水平居中文本 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 class 尝试了几种不同的建议，但似乎没有任何效果（javascript 定位、对齐项目和 webkit 转换）。关于为什么这不起作用以及我可以做些什么来解决它的任何建议？

Answer 1

跳过center并将text-align: center添加到bg-box-100-grey规则

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

/* 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;
  text-align: center
}
.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>

或者像下面这样更改 center class 并将其添加到 bg-box-100-grey 元素的 class

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

.center {
  text-align: center;
}

/* 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 center">
                    <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>

Answer 2

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

希望对您有所帮助:)

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

Horizontally Center Text In Fixed Position Div

html

javascript

css

position