1

I've searched on here and I can not find a working solution for me. I've tried the following Align image to the center both vertically and horizontally Image center align vertically and horizontally and a few more that i've found.

I've 2 columns. 1st has an image 500px X 500px 2nd has text

I need the image center aligned both vertically and horizontally. and when on mobile view the image should appear above the text / centered. 

<section id="what">
  <div class="row">
    <div class="col-md-6 box-image"><img class="box-image" src="http://chalkgallerylewes.co.uk/wp-content/uploads/2013/08/Placeholder-500x500px.png"></div>
    <div class="col-md-6">
      <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.
      </p>
      <ul>
        <li>Placeholder list </li>
        <li>Placeholder list </li>
        <li>Placeholder list </li>
        <li>Placeholder list </li>
        <li>Placeholder list </li>
      </ul>
      <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.
      </p>
      <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.
      </p>
      <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.
      </p>
    </div>
  </div>
</section>

I've made a JF Fiddle with one of the ways i've been trying.

https://jsfiddle.net/davidstokes5000/rrdfLpyj/

Bhuwan
  • 16,525
  • 5
  • 34
  • 57
DaveYme
  • 89
  • 11

3 Answers3

1

You can try this (no need to style the img). It should center the image above the text.

.box-image {
    display: flex;
    justify-content: center;
    align-items: center;
}
sme
  • 4,023
  • 3
  • 28
  • 42
1

Try to use flex css. Apply display:flex to row class and for vertical align center of child items apply align-items:center.

To align image horizontally center apply bootstrap center-block class to <img>

Reference for flex css

For responsive purpose use media query to set the display: block to the row to achieve your result.

Also there is horizontal scrolling in your code, to remove this wrap your row code into a div having container-fluid class.

Updated Fiddle

#what {
  background-color: #fff;
}

#what .row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

@media (max-width:768px) {
  #what .row {
    display: block;
  }
}

BTW there is a suggestion from @TemaniAfif to upgrade your bootstrap3 to bootstrap4. It will be easy for you to solve issues like this in bootstrap4.

If you have any thoughts on using bootstrap4 use this reference

Bootstrap4 Documentation

Bhuwan
  • 16,525
  • 5
  • 34
  • 57
  • flex is good but i don't agree with it in this situation ... he is using Bootstrap V3 and by chaging the property fo some bootstrap classes you can create some conflict .. maybe changing anoher class than `row` – Temani Afif Jan 15 '18 at 10:48
  • @TemaniAfif thats why I have used the parent id for this. I think flex will be good using less code rather than using absolute position – Bhuwan Jan 15 '18 at 10:51
  • i agree it's good but i think it's better to lead him to upgrade to V4 version (or add a comment for this) where there is already flex and he will see that it's more easier to deal with flex without even adding a CSS line ;) – Temani Afif Jan 15 '18 at 10:54
  • 1
    @TemaniAfif Yes, leading him to upgrade to V4 will be a good idea (i will add a comment). Thanks for the suggestion – Bhuwan Jan 15 '18 at 11:00
  • Thanks for this. I'm going to test this out as well. I did get a working solution above but this looks good as well. I will try move to version 4. But for the moment I need v3. – DaveYme Jan 15 '18 at 11:18
0

#what{background-color: #fff;}
.box-image img{
display: flex;
  align-items: center;
  justify-content: center;
   
}
<section id="what">
 <div class="row">
  <div class="col-md-6 box-image"><img class="box-image" src="http://chalkgallerylewes.co.uk/wp-content/uploads/2013/08/Placeholder-500x500px.png"></div>
  <div class="col-md-6">
   <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. </p>

<ul>

<li>Placeholder list </li>
<li>Placeholder list </li>
<li>Placeholder list </li>
<li>Placeholder list </li>
<li>Placeholder list </li>
</ul>

<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. </p>
<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. </p>
<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. </p>

  </div>
 </div>
</section>

Position absolute is doing the problem.

cauchy
  • 1,123
  • 1
  • 9
  • 19
  • That doesn't work, The image is breaking into the upper section ( not in the code here ) It's not sitting in it's own div. It's the -250px – DaveYme Jan 15 '18 at 10:30