-1

Hello folks I ran into a problem today that I've been trying to fix for at least 2 hours now. Basically what I want is an image on the left and then 2 lines of text that are vertically aligned to the image (in a way where it is responsive).

A picture here of what i would like to get:

enter image description here

I've tried a bunch of things. First I tried to put the image and the text in a separate div with display: inline-block; This made it so the text and image were next to each other but the text would be on the top.

I tried adding flexbox to this but this doesn't work since the display: inline-block; line would be overwritten.

I tried putting the image and text in the same div and using vertical-align: middle; This didn't work either because only the first line of text would be perfectly centered with the image and the second line would go below the image.

I've also been looking on stackoverflow for solutions for a while and on other sites I find with google aswell but I havn't found what I need.

The HTML of how my code is now:

<div class="projects">
    <img src="../Photos/kugelround6.jpg" alt="kugel logo" class="pic projects-pic">
    <span class="projects-text">Some text<br>Some more text</span>
</div>

The CSS:

.projects{

}

.pic{
  width: 200px;
  height: 200px;
  border-radius: 50%;
}

.projects-pic{
  vertical-align: middle;
}

.projects-text{
  vertical-align: middle;
}

Also sorry if my english, grammar or code isn't the best, I'm only a jr dev.

uteh
  • 41
  • 7

1 Answers1

1

I'd suggest you tu use flexbox:

.projects{
  display: flex;
  align-items: center;
}
<div class="projects">
    <img src="https://picsum.photos/150" alt="kugel logo" class="pic projects-pic">
    <span class="projects-text">Some text<br>Some more text</span>
</div>

You'll need media queries for responsiveness.

Valentin Duboscq
  • 970
  • 8
  • 20