我如何将其稍微移到顶部?

时间:2020-10-17 23:05:06

标签: html css

我想将智能手机移至文本上方,但在执行时遇到了一些麻烦。

我似乎找不到办法,我尝试过的事情是:

  • 使用填充
  • 使用保证金

但这似乎只是将内容移到了 智能手机自我。

有帮助吗??

Preview

预览

.smartphone {
  position: relative;
  width: 340px;
  height: 640px;
  border: 16px black solid;
  border-top-width: 60px;
  border-bottom-width: 60px;
  border-radius: 36px;
  float: right;
}


/* The horizontal line on the top of the device */

.smartphone:before {
  content: '';
  display: block;
  width: 5 0px;
  height: 5px;
  position: absolute;
  top: -30px;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #333;
  border-radius: 10px;
}


/* The circle on the bottom of the device */

.smartphone:after {
  content: '';
  display: block;
  width: 20px;
  height: 35px;
  position: absolute;
  left: 50%;
  bottom: -65px;
  transform: translate(-50%, -50%);
  background: #333;
  border-radius: 50%;
}


/* The screen (or content) of the device */

.smartphone .content {
  width: 310px;
  height: 520px;
  background: white;
}
<div id="home" class="block home-block">
  <div class="container">
    <div class="row">
      <div class="col-sm-12 col-lg-6  left-block">
        <div class="text-centered">
          <h1 class="title">Texter</h1>
          <p class="info-text">Envia mensagens de texto para todos os teus amigos.</p>
          <p class="Medium-text">Download Em Breve</p>
          <a href="https://play.google.com/?hl=pt-PT" target="_blank"><img src="playstore.png" alt="Playstore" style="height: 40px;"></a>
          <a href="https://www.apple.com/pt/ios/app-store/" target="_blank"><img src="appstore.png" alt="Apple App Store" style="height: 40px"></a>
        </div>
      </div>

      <div class="smartphone">
        <div class="content">
          <img src="" style="width:100%;border:none;height:100%" />
        </div>
      </div>
    </div>

1 个答案:

答案 0 :(得分:2)

.smartphone {
  position: relative;
  width: 340px;
  height: 640px;
  border: 16px black solid;
  border-top-width: 60px;
  border-bottom-width: 60px;
  border-radius: 36px;
  float: right; 

  # TRY ADDING THIS NEW LINE AND LET ME SEE THE RESULT TO GUIDE YOU THROUGH
  margin-top: -30px !important;
}