Question

  @media only screen and (max-device-width: 667px) and (min-device-width: 375px){
    .eventspage{
     background: transparent url(http://www.server.com/blue/image.jpg) center center/contain no-repeat scroll;}
    .eventspagetitle {
    margin-top: -226px !important;
	font-size:18px;
    }
    }
    .eventspagetitle {
    position: fixed;
    right: 14%;
    top: 65%;
    }
    @media only screen and (max-device-width: 568px) and (min-device-width: 320px)
    .eventspagetitle {
     right: 8%;
     }

    <section class="page-bnr eventspage">
    <div class="title-wrap ">
	<h5 class="eventspagetitle">Momentous events around the corner.</h5>
    </div>
    </section>

添加了带有文字的横幅图像。图像具有移动响应性，但文本未在横幅图像的中央对齐。在任何移动设备中，文本均应在图像的中央对齐。以下是代码我已经添加了。

<section class="page-bnr eventspage">
<div class="title-wrap ">
<h5 class="eventspagetitle">Momentous events around the corner.</h5>
</div>
</section>

@media only screen and (max-device-width: 667px) and (min-device-width: 375px){
.eventspage{
 background: transparent url(http://www.server.com/blue/image.jpg) center center/contain no-repeat scroll;}
.eventspagetitle {
margin-top: -226px !important;
font-size:18px;
}
}
.eventspagetitle {
position: fixed;
right: 14%;
top: 65%;
}
@media only screen and (max-device-width: 568px) and (min-device-width: 320px)
.eventspagetitle {
 right: 8%;
 }

Answer 1

您正在为元素提供固定的位置。这导致它保持在最初设置的位置。顶部和右侧的值将保持不变，并且可能无法在较小的设备上使用。

您可以使用以下代码将文本居中。这将允许您调整浏览器/设备的大小，并使文本居中显示在相对元素（.title-wrap）的中心。

尝试添加此CSS：

.title-wrap {
  position: relative;
}
.eventspagetitle {
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%)
}

@media only screen and (max-device-width: 667px) and (min-device-width: 375px) {
  .eventspage {
    background: transparent url(http://www.server.com/blue/image.jpg) center center/contain no-repeat scroll;
  }
  .title-wrap {
    position: relative;
  }
  .eventspagetitle {
    margin-top: -226px !important;
    font-size: 18px;
  }
}

.eventspagetitle {
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%)
}

<section class="page-bnr eventspage">
  <div class="title-wrap ">
    <h5 class="eventspagetitle">Momentous events around the corner.</h5>
  </div>
</section>

为此添加书签：https://www.w3.org/Style/Examples/007/center.en.html

如果忘记/需要复习，我总是回到它。

在所有移动设备上的横幅图像的中央显示文本

1 个答案: