Need to Align Image and Text Horizontally and Vertically Centered

Question

I can align them vertically and horizontally centered individually, but I need them both as a single unit to be centered horizontally, and the text to be centered vertically next to the image.

Here is what I have:

<div style="text-align: center; height: 50px; position: relative; border: 1px solid black;">
    <img src="img/image.jpg"><span style="margin-left: 150px; position: absolute; top: 50%; left: 50%; -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%);">SOMETEXT<span>
</div>

If I don't have the "margin-left" on the text then they overlap each other, but with the margin they are off-center.

I've looked through a couple dozen Stackoverflow answers to similar questions, but many are old and no longer work/supported, or it just isn't what I need.

TIA!

Possible duplicate of [Vertically align text next to an image?](https://stackoverflow.com/questions/489340/vertically-align-text-next-to-an-image) — Shivanshu Kant Prasad, Aug 10 '18 at 01:42

score 2 · Accepted Answer · answered Aug 10 '18 at 05:12

2

You can do also do it by simple css trick

div{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  align-items:center;
}

answered Aug 10 '18 at 05:12

Minal Munakarmi

177
4

score 1 · Answer 2 · answered Aug 10 '18 at 01:41

1

Like this?

<div style="text-align: center; height: 50px; line-height: 50px; position: relative; border: 1px solid black;">
  <img src="img/image.jpg" style="vertical-align: middle;">
  <span>SOMETEXT<span>
</div>

answered Aug 10 '18 at 01:41

critical_error

6,306
3
14
16

CSS line-height is what will help you to keep your text vertically aligned. Something to keep in mind. – critical_error Aug 10 '18 at 04:53

score 1 · Answer 3 · answered Aug 10 '18 at 07:00

1

.element{ 
  justify-content:center;
  align-items:center; 
}

answered Aug 10 '18 at 07:00

jplbrs

11
1

Need to Align Image and Text Horizontally and Vertically Centered

3 Answers3