Sometimes, you lot want to put text next to the image to brandish the information like a profile moving-picture show of the social media or service platform, a company'due south team members, and many more than.

In this brusque article, I will show yous how y'all can exercise this past using three methods. The 3 post-obit methods are:

  1. CSS Flexbox
  2. Vertical-marshal
  3. Bladder

Let's accept a look at how each of these methods works.

Method one: Using CSS Flexbox

The start method is CSS Flexbox. This one requires a parent element meaning your image and the text are wrapped around under a single HTML element with the div tag. So you apply CSS flexbox past adding brandish: flex to the parent element to make the chemical element'due south contents move from row to cavalcade, and the text volition exist next to an paradigm.

            .parent              {              display:              flex;   }

Case code

Here'due south how y'all apply flexbox on your website. I added width, elevation, and margin-right to make it wait decent for this instance:

            <style>              img              {              width:              150              px;              top:              150              px;              margin-right:              xv              px;   }    .parent              {              display:              flex;   } </style>  <div              form              =              "parent">   <img              src              =              "myimage.png"              />   <div>     <p>Technic</p>     <p>technic2330@gmail.com</p>     <p>Software Engineer</p>     <p>Created with Flexbox</p>   </div> </div>

Instance output

flexbox text next to image HTML

Method two: Using Vertical-align

The second method is the Vertical-align property. This one does non require your epitome and text to exist wrapped around under one chemical element. All you have to do is to add a vertical-align to the paradigm directly and so set the value to the middle.

The span tag itself volition make the text exist moved side by side to the image equally the p tag volition always make the text exist under the image. The vertical-marshal: eye is what makes the text aligned to the center, making information technology wait meliorate visually when you put the text adjacent to an image.

                          img              {              vertical-align:              center;   }

Example lawmaking

Here's how y'all use vertical-align holding on your website. Note that this method will piece of work only for one line text and if your text has more than one line or are bundled in lists, then you should use other methods instead.

            <style>              img              {              width:              150              px;              height:              150              px;              margin-right:              15              px;              vertical-align:              middle;   } </style>  <img              src              =              "myimage.png"              /> <span>Technic - Created with vertical-align</span>

Case output

vertical-align text next to image HTML

Method 3: Using Float

The third method is Float. This one also does not require your epitome and the text to be wrapped under one element.

Bladder is the old fashion of creating the website's layout and with the introduction of flexbox which makes creating the layouts much easier than before, the float property is now less frequently used by the developers. That being said, there are times when it makes sense to use float and hence we're including this method in the article.

To use bladder, yous only add float: left; straight to the image and this will make the image float to the left side, making your text appear adjacent to an paradigm.

Example Code

Here's how you use float holding on your website.

            <manner>              img              {              width:              150              px;              height:              150              px;              margin-correct:              15              px;              bladder:              left;   } </manner>  <img              src              =              "myimage.png"              /> <div>   <p>Technic</p>   <p>technic2330@gmail.com</p>   <p>Software Engineer</p>   <p>Created with Bladder</p> </div>

Example output

float text next to image HTML

Wrapping upwards

And this is how yous add the text next to an image using either flexbox, vertical-align, or bladder. Equally there are more than one ways you tin can do information technology, effort whatever of these methods to see which method volition work for your use cases.

Sometimes, you want to put text next to the image to brandish the information like a profile picture show of the social media or service platform, a visitor's team members, and many more.

Get my complimentary eastward-book to set up for the technical interview or showtime to Learn Total-Stack JavaScript