Question

我正在尝试弄清楚如何将徽标放置在我的目标网页的两个部分的中间，但仅限于移动视图。文本类适用于我的徽标。我似乎无法找到最好的方法。

.text {
 position: absolute;
 right: 70px;
 left: 70px;
 text-align: center;
 z-index: 10;
 margin: auto;
 max-width: 600px;
}

以下是codepen：http://codepen.io/anon/pen/xqQPVN?editors=1100

Answer 1

只需给它position:absolute并根据移动设备进行相应设置..

在移动设备的情况下添加了以下css。

/* Logo In Center For Mobile Device*/
  .logo-big {
    display: block;
    width: 100%;
    position: absolute;
    top: 500px;
    margin-top: -75px;

  }

Codepen链接 - http://codepen.io/sahildhir_1/pen/wJQxQy?editors=1100

以下是摘录 -

* {
  box-sizing: border-box;
}

html,
body {
  height: 100%
}

img {
  max-width: 100%;
}

.item {
  width: 50%;
  float: left;
  top: 0;
  left: 0;
  height: 100%;
  z-index: 0;
  overflow: hidden;
  background-color: #000000;
  background-position: center center;
  background-size: auto 100%;
  position: relative;
}

.overlay {
  width: 100%;
  height: 100%;
  position: absolute;
  background-color: rgba(0, 0, 0, 0.3);
  transition: .2s linear;
}

.nurseryarea {
  width: 100%;
  position: absolute;
  text-align: center;
  top: 45%;
  color: #fff;
  font-size: 30px;
  font-family: 'times new roman';
  font-weight: bold;
  transition: .2s linear;
}

 ::selection {
  color: #ebebe3;
  background: #222;
}

 ::-moz-selection {
  color: #ebebe3;
  background: #222;
}

.overlay:hover {
  background-color: rgba(0, 0, 0, 0.1);
  transition-property: background-color;
}

.overlay:hover .nurseryarea {
  opacity: 1;
  transition-property: opacity;
}

.logo-big {
  display: block;
  width: 100%;
}

.logo-big .svg {
  display: block;
  width: 100%;
  height: auto;
}

.imgsize {
  width: 40%;
}

.text {
  position: absolute;
  right: 70px;
  left: 70px;
  text-align: center;
  z-index: 10;
  margin: auto;
  max-width: 600px;
}

@media screen and (max-width:600px) {
  .nurseryarea {
    width: 100%;
  }
  .imgsize {
    width: 60%;
  }
  .text {
    position: absolute;
    right: 70px;
    left: 70px;
    text-align: center;
    z-index: 10;
    margin: auto;
    max-width: 600px;
  }
  /* Logo In Center For Mobile Device*/
  .logo-big {
    display: block;
    width: 100%;
    position: absolute;
    top: 500px;
    margin-top: -75px;
  }
  .logo-big .svg {
    display: block;
    width: 100%;
    height: auto;
  }
  .item {
    width: 100%;
    float: left;
    top: 0;
    left: 0;
    height: 500px;
    z-index: 0;
    overflow: hidden;
    background-color: #000000;
    background-position: center center;
    background-size: auto 100%;
  }
}

<div class="text">
  <a class="logo logo-big" href="http://www.lygonstnursery.com">
    <img class="svg " src="https://www.lygonstnursery.com/wp-content/uploads/2017/03/NURSERY-landing-page.png" alt="Lygon Street Nursery">
  </a>


</div>



<div class="item" style="background-image: url(https://www.lygonstnursery.com/wp-content/uploads/2017/02/LygonStNursery_Nursery-29.jpg);background-size:cover;">

  <div class="overlay">
    <div class="nurseryarea">
      <a href=" https://www.lygonstnursery.com/nursery/"><img class='imgsize' src="https://www.lygonstnursery.com/wp-content/uploads/2017/03/nursery.png" ;></a>
    </div>
  </div>


</div>

<div class="item" style="background-image: url(https://www.lygonstnursery.com/wp-content/uploads/2017/02/LygonStNursery_Brunswick-24.jpg); background-size:cover;">

  <div class="overlay">
    <div class="nurseryarea">
      <a href=" http://www.landscapes.lygonstnursery.com"><img class="imgsize" src="https://www.lygonstnursery.com/wp-content/uploads/2017/03/landscapes.png" ;></a>
    </div>
  </div>
</div>

Answer 2

如果你想完全控制定位我会说逐步进行特定的媒体查询（例如：425px，375px，320px）并使用像素定位。如果你想保持它的通用性，你必须准备好在这些尺寸之间有一些小的差异，但你可以使用百分比，结果不是那么糟糕。

@media (max-width: 425px) { 
   .text {
       position: absolute;
       right: 34%;
       left: 32%;
       top: 34%;
   }

}

响应式徽标放置

2 个答案: