how to place a text next to an image

how to place a text next to an image

Having a text and a picture side by side can easily be achieved using different styling’s, however the most important property to achieve it is the display property, by default, text are usually written within either a paragraph tag or a heading tag and the default display value is block, on the other hand, images have a display value of inline, and so, when you attempt to place the two items side by side, like an image and a text next to it, you may need some additional stylings.

For example, if you have an HTML of this structure

<div>

      <div>

        <figure>

          <img src=”./images/FB_IMG_15366945682369518.jpg” class=”image” />

            <!– remember to add your image properly –>

        </figure>

      </div>

      <div>

        <p class=”paragraph”>1. MAJID</p>

      </div>

    </div>

 By mainly adding few CSS, your output will be like this

text not next to image

This is good but certainly not our target, our target is to have the image appear neatly at the very left while the text sits at the right, for instance, an image of someone which will be at the left and the text holding the name of the person in the image on the right. for example

image-with-text

with this in mind as our target we can then simply restructure our HTML to be like the one below(just added a few classes)

<div class=”media”>

      <div class=”media-left siblings”>

        <figure class=”image is-48×48″>

          <img src=”./images/contact-nurse.jpeg” />

        </figure>

      </div>

      <div class=”media-content siblings”>

        <p>1. DRAKE</p>

      </div>

    </div>

Adding CSS to place text next to image

* {

  margin: 0;

  padding: 0;

}

body {

  background-color: #000;

}

img {

  width: 50px;

  height: 50px;

  border-radius: 50%;

}

.media {

  display: flex;

  justify-content: space-around;

  align-items: center;

  margin: 100px auto;

  padding: 5px;

  width: 300px;

  height: 60px;

  -webkit-box-shadow: 0 10px 6px -6px #777;

  -moz-box-shadow: 0 10px 6px -6px #777;

  box-shadow: 0px 10px 40px -6px #1abc9c;

  background-color: #fff;

  border-radius: 100px;

}

well, if you are new to flex box and you want to learn how to make cool designs using flex, you can click here

.siblings {

  width: 50%;

}

.media-left {

  margin-left: 30px;

}

If you get your hand on the code above, you will have a very nice design of a text and image neatly sitting at the left of the parent container like this.

text next to image

The design can as well be modified to suit your preference

Leave a Comment

Your email address will not be published. Required fields are marked *