How can I put my text and image in the middle of a div?

Question

I have 4 different rows of two columns and I have a picture on one column and text on the other. As the text and images are different sized I want them to be in the middle vertically.

This is my code for one of the columns and CSS for that div

.col2 {
  float: left;
  width: 46%;
  padding: 2%;
  text-align: center;
  position: relative;
  justify-content: center;
  height: 300px;
}

<div class="col2">
        <img src="images/freelance.png" alt="three people watching a presentation">
</div>
<div class="col2">
    <h2>Work as a Freelancer</h2>
    <p>This session will set out the key points you need 
       to consider when taking on freelance work in order to make
       sure you gain maximum professional and personal benefit.</p>
    <div class="book">
        <a class="booked" href="#" target="_blank"><p><b>Book 14th March 6pm</b></p></a>
    </div>
</div>

This is the before with my code

This is with @N3v4da Stone 's changes

Does this answer your question? [How to vertically center a "div" element for all browsers using CSS?](https://stackoverflow.com/questions/396145/how-to-vertically-center-a-div-element-for-all-browsers-using-css) — Software Engineer, Mar 02 '21 at 19:32

score 1 · Accepted Answer · answered Mar 02 '21 at 19:25

N3v4da's explanation does work, however I will try and go into some more detail.

Wrapper div uses flexbox to display elements in a row.

align-items: center; centers items vertically along the flex row (this means that the text is centered with the image)

justify-content: space-between puts the img and div elements to opposite sides of the wrapper div.

gap: 20px ensures there is always a 20px gap in between the img and div

.wrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  
  background-color: lightblue;
}

.wrapper img {
  width: 300px;
  height: 300px;
}

<div class="wrapper">

  <img src="https://www.w3schools.com/w3css/img_lights.jpg" alt="three people watching a presentation">

  <div class="rightSide">
    <h2>Work as a Freelancer</h2>
    <p>This session will set out the key points you need to consider when taking on freelance work in order to make sure you gain maximum professional and personal benefit.</p>
    <div class="book">
      <a class="booked" href="#" target="_blank">
        <p><b>Book 14th March 6pm</b></p>
      </a>
    </div>
  </div>
</div>

Make sure you remove any CSS that may interfere with this code, this might be why N3v4da's version didn't work. This is what my solution does

score 0 · Answer 2 · answered Mar 02 '21 at 18:43

Use a container and flexbox CSS for wrap your col. Maybe like this if isn't correct, provide an image that you want.

.flex-container {
        display: flex;
        flex-flow: row wrap;
        justify-content: space-between;
        align-items: center;
     }

   .col2 {
      width: 46%;
      padding: 2%;
      text-align: center;
  }

 <div class="flex-container">
       <div class="col2">
        <img src="data:image/png;base64,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" alt="three people watching a presentation">
        </div>
        <div class="col2">
            <h2>Work as a Freelancer</h2>
            <p>This session will set out the key points you need 
               to consider when taking on freelance work in order to make
               sure you gain maximum professional and personal benefit.</p>
            <div class="book">
                <a class="booked" href="#" target="_blank"><p><b>Book 14th March 6pm</b></p></a>
            </div>
        </div>
     </div>

I've updated the question above with some images as I can't upload them here. I've tried your code but the whole thing goes into one column for some reason. — Alex L., Mar 02 '21 at 18:54
Make sure you remove any CSS that may interfere with this code — Nevada, Mar 02 '21 at 19:46

How can I put my text and image in the middle of a div?

2 Answers2