ブラウザのサイズをiphoneサイズにリサイズするときに主人公のテキストを中央に配置するにはどうすればよいですか？

Question

私はブラウザがiphoneサイズにレンダリングされたときに応答のあるヒーローテキストを処理する理想的なソリューションを考え出すのに苦労しています。今のところ、残念ながらそれは次のようになります。

これは私がヒーローセクションについているCSSです：私はこの試みた

/* === HERO === */ 

#hero 
{ 
    background: url("/wp-content/themes/threegreenbirds-daniel/images/grass-ground-new.jpg") 50% 0 repeat fixed; 
    min-height: 500px; 
    padding: 40px 0; 
    color: white; 
    -webkit-font-smoothing: antialiased; 
    text-rendering: optimizeLegibility; 
} 

.hero-text { 
    position: absolute; 
    top: 65%; 
    left: 20%; 
    margin-top: -150px; 
} 

/* === MEDIA QUERIES === */ 

@media screen and (max-width: 600px) { 
    .logged-in .navbar-fixed-top { 
     top: 42px; 
    } 
} 

@media screen and (max-width: 568px) { 
    .hero-text { 
     margin: 0; 
     margin-top: 30px; 
     position: relative; 
     background: none; 
     } 
} 

を：

@media screen and (max-width: 568px) { 

    .hero-text { 
    margin: 0; 
    position: relative; 
    background: none; 
    } 

    .hero-text:after { 
    content: ''; 
    left: -9999px; 
    right: -9999px; 
    top: 0; 
    bottom: 0; 
    position: absolute; 
    } 
} 

を、それが持っています問題を解決しませんでした。

Answer 1

.hero-textクラスに追加の条件を追加します。

@media screen and (max-width: 568px) { 
.hero-text { 
left:0; 
right:0 
margin:0 auto; 
text-align:center; 
}