CODEWITHSUNDEEP
htmlcss
Euridice01
Euridice01

Reputation: 2568

How can I center an image and text horizontally and vertically inside a div?

I'm having trouble getting the image and text to be horizontally and vertically align in the center of this div.

Currently, it seems to be off center (but close enough that it looks almost center?)

.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/[email protected] ">
  </a>
  <a class="Call-Support " href="tel:555-555-5555 ">Call Support</a>
</div>

Upvotes: 0

Views: 49

Answers (1)

Kuja
Kuja

Reputation: 449

Here's the code. Current code shows a responsive button that has 25% padding on each side. You can change width:50% to width:250px if you want a button with a fixed width.

/* 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;
}
   <div class="Rectangle show-mobile hide-desktop">
     <a href="tel:555-555-5555"><img class="call icon-image" src="images/[email protected]" /></a>
     <a class="Call-Support" href="tel:555-555-5555">Call Support</a>
   </div>

Upvotes: 1

Related Questions