将浏览器大小调整为 iphone 大小时，如何将英雄文本居中？答案

【问题标题】：How can I center the hero text when resizing the browser down to iphone size?将浏览器大小调整为 iphone 大小时，如何将英雄文本居中？
【发布时间】：2017-06-20 08:34:10
【问题描述】：

当浏览器被渲染到 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;
  }
}

但它并没有解决问题。

【问题讨论】：

标签： html css twitter-bootstrap responsive-design media-queries

【解决方案1】：

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

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

【讨论】：