What is the best way to position a img and a div side by side and center them?

Question

se are working on a website since some days and have a problem right now. We try to position a img and a div side by side, which I reached but I found no solution to have 2 texts sepertly and centered verticaly in the div.

My question is how do I get a similar result as on this picture? This is a snippet of a site i found

I searched in the markup of the site how it is done and recognised that it was made with disply type "table-cell", I tryed to build it but i failed.

I hope you can help me Thank you in advance

Mehrad · Accepted Answer · 2016-09-08T18:34:44.940

0

try Flexbox: "life made simple";

.container {
  display: flex;
}
.container div {
  flex: 1 1 auto;
}

<div class="container">
  <img src="http://placehold.it/50">
  <div>
    <div>Your Name here</div>
    <div>second div</div>
  </div>
</div>

edited Sep 08 '16 at 18:34

answered Sep 08 '16 at 18:01

Mehrad

1,372
15
20

Thanks for your help but how do I get 2 divs one above the other on the right of the img? – hansi_reit Sep 08 '16 at 18:16

What is the best way to position a img and a div side by side and center them?

1 Answers1