如何在将浏览器调整为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; 
}