水平居中文本在固定位置股利

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>

希望它能幫助:)

Answer 2

跳過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>