-1

I am trying to center align a span inside a div, which also contains an img element. 

.element {
  display: inline-block;
}

.element img {
  height: 40px;
  width: 40px;
  border-radius: 50%;
  margin-right: 20px;
}

.element span {
  display: inline-block;
}
<div class="element">
  <img src="https://images.pexels.com/photos/35646/pexels-photo.jpg?auto=compress&cs=tinysrgb&dpr=1&w=500">
  <span>hello</span>
</div>

or see this fiddle

However the text wont vertical align. I have looked primary at this question. However vertical-align: middle does nothing here.

I also looked at this question. However I will rather avoid anything position: relative & position: absolute workarounds for this. I also tried messing the line-height with no luck.

I even tried to set height: 100%on the span, as this question suggests, but that does nothing either.

I basically looked at bunch of questions here on SO, it seems like css is so weird about this, that there basically is 12 approaches for a simple thing like this. Yet I can't seem to get 1 of them to work in my occasion.

What is up with this behavior?

EDIT:

Marked as duplicate to How to Vertical align elements in a div? - I have explained that these solutions with line-height and vertical align doesn't work in my case as explained in the original question. The accepted solution did not work in this case. How is it a duplicate?

Jonas Praem
  • 1,902
  • 1
  • 18
  • 45
  • I reference 3 other questions and explain why this is different. "Marked as duplicate, no comments btw" – Jonas Praem Jan 27 '19 at 00:36
  • I have marked with 4 question as duplicate with more than 70 different answers – Temani Afif Jan 27 '19 at 00:39
  • and you should not stick to the accepted answer, you should go throught ALL the answers – Temani Afif Jan 27 '19 at 00:40
  • .. yeah, since I referenced 3 questions in the post, I have obviously looked at more than the accepted answer. The accepted answer and the question determines whether it is a duplicate or not. "Edit to explain why your question is different" - is just words to me. I get closed no matter the effort put into the prior research before the question. – Jonas Praem Jan 27 '19 at 00:43
  • proof of the duplicate : from the second question (https://stackoverflow.com/questions/489340/vertically-align-text-next-to-an-image) the first answer : simply add `vertical-align:middle` to the image https://jsfiddle.net/jzp2s5gk/ – Temani Afif Jan 27 '19 at 00:43
  • @TemaniAfif I explained several times here, and in the question that `vertical-align: middle` doesn't work. You haven't even read the question – Jonas Praem Jan 27 '19 at 00:44
  • OMG you edited that in after I answered you. What sort of attitude is that. – Jonas Praem Jan 27 '19 at 00:47
  • 1
    The copy past simply did went so I edit .. but my first comment without the edit was clear : "add vertical-align to the image and it's from the duplicate" So before accusing me that I don't read your question (because I do) you should also take the time to read the duplicates and my comments. As a side note, closing a question as a duplicate is to help you not against you. – Temani Afif Jan 27 '19 at 00:49
  • 1
    another proof of the duplicate: you accepted an answer that is provided in at least 3 of the questionz I added as duplicate if not all of them (you can go through all of them and you will see) – Temani Afif Jan 27 '19 at 00:50
  • My point still stands. I can't use `vertical-align: middle` for this, because it pushes the root elements position. A part of the question is the prerequisite that no `vertical-align: middle` - The first question you marks as duplicate is exactly that. Your fiddle doesn't help me, since it ignores parameters from the question. – Jonas Praem Jan 27 '19 at 00:54
  • 1
    From the first question, 3rd answer : https://stackoverflow.com/a/31078418/8620333 .. compare with the answer you accepted – Temani Afif Jan 27 '19 at 00:56
  • 1
    same question another answer : https://stackoverflow.com/a/51626821/8620333 – Temani Afif Jan 27 '19 at 00:57

2 Answers2

1

The answer here is probably to use flexbox. If your flex-direction is row (which is default), you can use align-items to center the elements vertically and justify-content to justify the row to the left (the "start" of the flex container). Let me know if you have any questions!

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

.element img {
  height: 40px;
  width: 40px;
  border-radius: 50%;
  margin-right: 20px;
}

.element span {
  display: inline-block;
}
<div class="element">
  <img src="https://images.pexels.com/photos/35646/pexels-photo.jpg?auto=compress&cs=tinysrgb&dpr=1&w=500">
  <span>hello</span>
</div>
jaredgorski
  • 492
  • 5
  • 12
0

Use flexbox for this. Sample:

.element {
   display: flex;
   align-items: center;
}

Use align-items: center for vertical align and justify-content: center; if you need also horizontal align center.

Αntonis Papadakis
  • 1,100
  • 1
  • 9
  • 22