How to place the text next to the image-CodePudding

I was creating a website using CSS and came across this problem: I was making an "About Me" page but somehow instead of the text appearing next to the image, it's placed under the image. Any ideas?

CSS:

.about-img {
  width: 50%;
  padding: 0 15px;
}
.about-text {
  width:50%
  padding: 0 15px;
}

CodePudding user response：

Assuming both the text and image are nested in the same div. You can set a display: flex; on the parent div about. By default, a flex display has a flex-direction: row;, so the elements should line up side by side. Then you can add align-items: center; to align the text in the center of the image.

.about-img {
  width: 50%;
  padding: 0 15px;
}

.about-text {
  width: 50%;
  padding: 0 15px;
}

.about {
  display: flex;
  align-items: center;
}

<div >
  <img src="https://dummyimage.com/300/000/fff" />
  <p >
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
    survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing
    software like Aldus PageMaker including versions of Lorem Ipsum.
  </p>
</div>

CodePudding user response：

Wrap your image and text in a div and set it a display: flex;

.about-wrap {
  display: flex
}

<div >
  <img  />
  <div ></div>
</div>

CodePudding user response：

You can use flex class, something like this :

CSS

.flex {
  display:flex;
}

HTML

<div > 
    
<div> *YOUR IMG* </div>
<div> *YOUR TEXT* </div>
    
</div>

CodePudding user response：

You can refer this code to align text next to the image.

 .about {
        display: flex;
        align-items: center;
        justify-content: center
      }
      img {
        max-width: 100%
      }
      .about-image {
        flex-basis: 40%
      }
      .about-text {
        font-size: 20px;
        padding-left: 20px;
      }

  <body>
    <div >
      <div >
        <img src="https://i.pinimg.com/originals/26/ea/fc/26eafc0b14488fea03fa8fa9751203ff.jpg">
      </div>
      <div >
        <h1>Paris is one of the most beautiful cities in France.</h1>
      </div>
    </div>
  </body>