html - 将浏览器缩小到iPhone大小时，如何使英雄文字居中？

当浏览器缩小到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;
  }
}

但这并没有解决问题。

最佳答案

在您的.hero-text类中添加其他条件。

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