-1

I want it to make text center with the image and also center it when text goes to the next line. I can better show it.

When text is on just 1 line want this to happen: enter image description here

When text is goes on 2 lines want this to happen:

enter image description here

NOTE: I am new to HTML and CSS so that yea.

Peter
  • 9
  • 3
  • 2
    Does this answer your question? [Vertically align text next to an image?](https://stackoverflow.com/questions/489340/vertically-align-text-next-to-an-image) – Swimmer F Aug 31 '21 at 08:56
  • Use the flex solution from the duplicate question. ALso try to learn how to find solutions by yourself . If you are new to HTML and CSS then all your questions ( being beginner questions ) already have dozens of answers here on SO and on other parts of the web. Just learn how to ask ' google ' what you need and it will deliver. AND last but not least, you want to post questions here on SO please read How To Ask – Mihai T Aug 31 '21 at 08:59

2 Answers2

0

Simply use CSS flex or grid

.root {
  width: 260px;
  display: flex;
}

.root>div {
  display: flex;
  justify-content: center;
  align-items: center;
}
<div class="root">
  <div>
    <img src="https://picsum.photos/200/200" width="60" />
  </div>
  <div>
    I am a multiline text and I want to be center aligned!
  </div>
</div>

https://codepen.io/neetigyachahar/pen/YzQwRRx

Neetigya Chahar
  • 683
  • 5
  • 14
0

Do this:

   .wrapper{
            display: flex;
            flex-direction: row;
            justify-content: flex-start;
            align-items: center;
        }
        .wrapper .image{
            width:100px;
            height:100px;
            background-color:red;
            color:white;
            font-weight: bold;
            text-align: center;
            margin-right:5px;
        }
        .wrapper .text{
            font-size:18px;
        }
<div class="wrapper">
   <div class="image">img</div>
   <div class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Molestie nunc non blandit massa enim nec dui. Nunc lobortis mattis aliquam</div>
</div>
Arezou Saremian
  • 508
  • 3
  • 8