在不影响另一个DIV的情况下将幅度顶部添加到DIV

时间：2018-07-26 16:34:39

标签： html5 css3 bootstrap-4

在我的网站上，我并排有2个DIV。右边的第一个包含文本，而左边的一个包含图像。我需要在第一个DIV中添加一个margin-top: 5%;。当我这样做时，此边距也将应用于右侧的边距。我已经仔细检查了我的代码，对我来说看起来不错。

这就是我想要的样子：

enter image description here

正在发生的事情：

enter image description here

这是我的代码

body {
  width: 100%;
  margin: 0 auto;
}

.como-funciona-container {
  width: 80%;
  margin: 0 auto;
  margin-top: 5%;
}

.como-funciona-device {
  width: 45%;
  display: inline-block;
  text-align: center;
}

.como-funciona-device img {
  width: 50%;
  margin: 0 auto;
}

.como-funciona-text {
  width: 49%;
  display: inline-block;
  margin-left: 5%;
}

.como-funciona-text h5 {
  font-size: 2.7em;
  color: #2c2c2c;
  font-weight: 300;
}

.como-funciona-text p {
  margin-top: 2%;
  font-size: 1.2em;
  color: #6b6b6b;
  line-height: 2em;
}
<body>
  <div class="row">
    <div class="como-funciona-container" style="border: 1px solid;">
      <div class="como-funciona-text" style="border: 1px solid;">
        <h5>¿Cómo funciona?</h5>
        <p>Con solo leer el código QR que SimpleCash genera puedes recibir, pagar y retirar tus fondos. Ahora tendrás tu dinero de forma virtual en tu celular y podrás realizar transacciones de forma rápida y segura.</p>
      </div>
      <div class="como-funciona-device" style="border: 1px solid;">
        <img src="img/screen-qr.png" alt="Aplicación SimpleCash">
      </div>
    </div>
  </div>

  <body>

1 个答案:

答案 0 :(得分：0)

正如@Sandip Nirmal所说，我要做的就是将vertical-align: middle;添加到我的CSS中。

相关问题
最新问题