Horizontal-Center Text in einer festen Position Div

Question

Ich habe Text in der folgenden div aber ich kann nicht scheinen, es Mitte ausrichten:

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

Die CSS für diesen Code ist wie folgt:

.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; 
} 

Ich habe verschiedene Vorschläge für die .center-Klasse ausprobiert, aber nichts scheint zu funktionieren (Positionierung von JavaScript, Ausrichtung von Elementen und Webkit-Transformationen). Irgendwelche Vorschläge, warum das nicht funktioniert und was ich tun kann, um es zu beheben?

Answer 1

hinzufügen text-align:center zu Ihrem .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>

Hoffe, es hilft :)

Answer 2

center überspringen und fügen text-align: center zum bg-box-100-grey Regel

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

Oder die center Klasse ändern, wie unten und fügen Sie ihn in die Klasse des bg-box-100-grey Element

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