Question

无论是屏幕大小如何，我一直在努力使响应速度和外观保持正常。.我已将该网站上传到我拥有的随机域中：

我的主要问题是徽标必须是图像，而不是实际的文本，并且无论屏幕大小如何，我都需要使线条始终始终是图像的中心，然后当高度变高时，该行往往会偏离中心较小。我尝试向该行添加针对不同屏幕尺寸的媒体查询，但这实际上不起作用

编辑：将代码也放入帖子中

HTML：

<!-- Carousel -->

<div id="carouselExampleFade" class="carousel slide carousel-fade" data-ride="carousel" data-interval="4200" data-pause="false">
  <div class="carousel-inner">
    <div class="carousel-item black-fade">
      <img class="d-block w-100 slide-fade" src="/Images/slide-imagery/Warendorf16_02.jpg" alt="First slide">

    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="/Images/slide-imagery/AL40028200.jpg" alt="Second slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="/Images/slide-imagery/FUSION-230-x-180-H-67a.jpg" alt="Third slide">
    </div>
    <div class="carousel-item">
        <img class="d-block w-100" src="/Images/slide-imagery/mosaic_anniversary_oro_doppia.jpg" alt="Fourth slide">
      </div>
  </div>
</div>
<div class="title-container">
    <span class="title-underline"></span>
    <h1 class="test2 load-delay"><img src="/Images/Brooklands-Interiors-logo-noBG-noLine.svg" width="500px" class="BI-loadin"></h1>

    </div>
    <p class="title-intro">Showroom now open on Oyster Lane, Brooklands</p>
<div class="arrow-down"><a href="#pull-down"><img src="/Images/arrow-dow.svg" width="40px" class="arrow-bounce"></a></div>

CSS：

    /* Title load in styling */

.title-container {
    position: absolute;
    width: 50%;
    height: 100%;
    text-align: center;
    vertical-align: middle;
    top: 50%;
    display: inline-block;
    left: 50%;
    transform: translate(-50%, -50%);
}

.test2 {
    opacity: 0;
    animation: example2 4s linear;
    z-index: 1000;
    padding-top: 42vh;
  }

  @keyframes example2 {
    0% {padding-top: 47vh;}
    7% {padding-top: 42vh; opacity: 1;}
    85% {padding-top: 42vh; opacity: 1;}
    100% { opacity:0;}
  }


  .title-underline {
    background-color: white;
    height: 8px;
    width: 500px;
    display: block;
    position: absolute;
    transform: scaleX(0);  
    animation: example3 3s linear;
    animation-delay: 1.8s;
    z-index: 200;
    margin-top: 48vh;
    left: 50%;
    margin-left: -250px;
  }

  .title-underline:after {
    padding-bottom: 200px;
  }

@keyframes example3 {
    0% {transform: scaleX(0);}
    10% {transform: scaleX(1);}
    11% {transform: scaleX(1.05);}
    12% {transform: scaleX(1.035);}
    13% {transform: scaleX(1.025);}
    14% {transform: scaleX(1.01);}
    85% {transform:scaleX(1); opacity: 1;}
    100% {opacity: 0; transform:scaleX(1);}
  }

  .title-intro {
      opacity: 0;
      color: white;
      font-weight: 500;
      animation: subtitlefade 4.1s ease-in-out;
      font-size: 1.8rem;
      top: 50%;
      position: absolute;
      left: 50%;
      transform: translate(-50%, -50%);
      animation-delay: 5100ms;
      letter-spacing: .1rem;
      text-align: center;
  }

  @keyframes subtitlefade {
    20% {opacity: 0;}
    30% {opacity: 1;}
    95% {opacity: 1;}
    100% {opacity:0;}
  }

  @keyframes delayedfade {
      100% {opacity: 1;}
  }

  .load-delay {
      animation-delay: 1000ms;
  }

如何将具有绝对跨度的图像居中放置在响应中心

0 个答案: