Alignment image

Question

I'm working on a site which needs an image centered in the div on the left side, centered off the right div with a background.

I tried to a common solution, but for some reason, it won't work. It must be responsive as well, so I'm a bit in the dark over here. See my fiddle for the example.

<div class="container-fluid">
 <div class="row">
<div class="col-12 col-sm-6">
  <div class="leftSide">
    <img src="https://images.pexels.com/photos/3755760/pexels-photo-3755760.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" class="img-fluid imgLeft">
  </div>
</div>
<div class="col-12 col-sm-6">
  <div class="rightSide">
    <h3>
    Some text
    </h3>
    <p>
    Some more text 
    </p>
   <button type="button" class="btn btn-primary">Some text</button>
  </div>
</div>

https://jsfiddle.net/Onno0297/grvwxby2/1/

Answer 1

If I understand your question correctly then below code will work.

Visit https://jsfiddle.net/alishapatel/n3ap1vjo/4/!

.leftSide {
  height: 100%;
  display: flex;
  align-items: center;
}

.rightSide {
  background: #313131;
  height: 546px;
  color: #fff;
}

.rightSide h3 {
  text-align: center;
  padding-top: 200px;
}

.rightSide p {
  text-align: center;
}
.btn.btn-primary {
  margin: 0 auto;
  display: block;
}

.imgLeft {
  max-height: 400px;
  max-width: 300px;
  margin: 0 auto;
  width: 100%;
}

<div class="container-fluid">
  <div class="row">
    <div class="col-12 col-sm-6">
      <div class="leftSide">
        <img src="https://images.pexels.com/photos/3755760/pexels-photo-3755760.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" class="img-fluid imgLeft">
      </div>
    </div>
    <div class="col-12 col-sm-6">
      <div class="rightSide">
        <h3>
        Some text
        </h3>
        <p>
        Some more text 
        </p>
       <button type="button" class="btn btn-primary">Some text</button>
      </div>
    </div>
  </div>
</div>