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

跳过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类，如下所示，并将其添加到bg-box-100-grey元素的类

.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中水平居中文本

2 个答案: