Question

我无法将图像和文本水平和垂直对齐在此div的中心。

目前，它似乎偏离中心（但足够接近它看起来几乎居中？）

.Rectangle {
  height: 57px;
  border-radius: 8px;
  background-color: #0e74af;
  margin: 50px auto;
  margin-left: 14px;
  margin-right: 14px;
}
.call {
  height: 24px;
  object-fit: contain;
  margin-left: 72px;
  margin-top: 16px;
}
.Call-Support {
  height: 23px;
  font-family: BentonSans-Regular;
  font-size: 20px;
  font-style: normal;
  font-stretch: normal;
  color: #ffffff;
  margin-left: 8px;
  text-decoration: none;
  margin-top: 17px;
}

<div class="Rectangle show-mobile hide-desktop">
  <a href="tel:555-555-5555>
    <img class=" call icon-image " src="images/call@2x.png ">
  </a>
  <a class="Call-Support " href="tel:555-555-5555 ">Call Support</a>
</div>

Answer 1

这是代码。当前代码显示响应按钮，每侧有25％的填充。如果您想要一个宽度固定的按钮，可以将 宽度：50％ 更改为 宽度：250px 。< / p>

＆＃13;

/* Styles go here */

.Rectangle{

  height: 57px;
  border-radius: 8px;
  background-color: #0e74af;
  margin: 0 auto;
  width:200px;
  text-align:center;
}

.call {
  display:inline-block;
  margin: 0 auto;
  margin-top:15px;
}

.Call-Support {
  height: 23px;
  font-family: BentonSans-Regular;
  font-size: 20px;
  font-style: normal;
  font-stretch: normal;
  color: #ffffff;
  text-decoration: none;
  display:inline-block;
}

＆＃13;

   <div class="Rectangle show-mobile hide-desktop">
     <a href="tel:555-555-5555"><img class="call icon-image" src="images/call@2x.png" /></a>
     <a class="Call-Support" href="tel:555-555-5555">Call Support</a>
   </div>

＆＃13;

如何在div中水平和垂直居中显示图像和文本？

1 个答案: