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

Question

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/call@2x.png ">
  </a>
  <a class="Call-Support " href="tel:555-555-5555 ">Call Support</a>
</div>

margin: 0 auto; on the div should do the trick. EDIT: your code looks fine, you have margin-top set to 50px and rest are auto. — Kuja, Jan 04 '17 at 20:12
@KujAslani I think you're close but then when I try to shrink and expand the view for testing, the div is stetched (no margins are shown on either side) and the text remains where it is on the smaller view but on expanding, it doesn't fit back in the middle. It stays to the left. Thanks! — Euridice01, Jan 04 '17 at 20:23
so you want it to have padding when it's for browsers and fill the window if it's on mobile? or keep padding on all resolutions? — Kuja, Jan 04 '17 at 20:24
Added some code as an answer, let me know if that's to any help. — Kuja, Jan 04 '17 at 20:40
keep the padding on all resolutions but the text AND image should move/be centered — Euridice01, Jan 04 '17 at 20:44
Possible duplicate of [Horizontally center a div in a div](http://stackoverflow.com/questions/114543/horizontally-center-a-div-in-a-div) — Heretic Monkey, Jan 04 '17 at 21:01

Kuja · Accepted Answer · 2017-01-04T21:00:13.520

1

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/call@2x.png" /></a>
     <a class="Call-Support" href="tel:555-555-5555">Call Support</a>
   </div>

edited Jan 04 '17 at 21:00

answered Jan 04 '17 at 20:33

Kuja

449
6
20

In your example, the text/image are not vertical and horizontally aligned in the center of the div. – Euridice01 Jan 04 '17 at 20:47
Pretty much fixed. Thank you. Just need to add margin to the top of the div so it's not all the way to the top of the page but like 20px down e.g. I can use margin-top property for that right? for the div? Thanks! – Euridice01 Jan 04 '17 at 21:08
@Euridice01 yes. just change the 'margin: 0 auto' under .Rectangle. 'margin: 20px auto' will do the trick – Kuja Jan 04 '17 at 21:10

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

1 Answers1