-2

 .col-sm-6 {
     position: absolute;
     min-height: 1px;
     padding-right: 15px;
     padding-left: 15px;
 }
<div class="col-sm-6">
    <img class="img-responsive img-rounded center-block" src="images/test.jpg" alt="">
</div>
<div class="col-sm-6">
    <h2 class="section-header">Title</h2>
    <p class="lead text-muted">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.</p>
</div>

I'm relatively naïve with CSS and am currently re-arranging a template site for my purposes. I've got it all working how I would like apart from I can't vertically centre images in the columns in relation to the size of the other column. Is this possible?

I've tried a few suggestions but no luck yet. Thanks for any help.

marc_s
  • 732,580
  • 175
  • 1,330
  • 1,459
Richard Southall
  • 1
  • 1
  • 2
    Welcome to Stack Overflow! Questions seeking code help must include the shortest code necessary to reproduce it **in the question itself** preferably in a [**Stack Snippet**](https://blog.stackoverflow.com/2014/09/introducing-runnable-javascript-css-and-html-code-snippets/). See [**How to create a Minimal, Complete, and Verifiable example**](http://stackoverflow.com/help/mcve) – Paulie_D Dec 19 '18 at 13:01
  • 2
    **What other column?** – Paulie_D Dec 19 '18 at 13:01
  • @Paulie_D thanks I've tried adding more of the code to a stack snippet (not sure how to get it to drop in an image). The text in the columns varies in length in different containers however I'd like the image to always be vertically centred. – Richard Southall Dec 19 '18 at 13:39
  • Your first issue to to make the columns the same height...there's an SO Q&A for that [here](https://stackoverflow.com/questions/19695784/how-can-i-make-bootstrap-columns-all-the-same-height), then the flexbox solutions below will work. – Paulie_D Dec 19 '18 at 13:42
  • If you give an example (image or something) of your desired view it would be helpful for us to help. – Partho63 Jan 01 '19 at 09:56

2 Answers2

0

Try this: 

   .col-sm-6 {
        display: flex;
        align-items: center;
    }

    img {
        height: auto;
    }

add justify-content: center; to the parent class if you want to align them horizontaly

hoover_D
  • 620
  • 4
  • 9
-1

You can try out this. Set the styles as below. So that you can get your image center aligned.

<style>
.col-sm-6 .img-responsive img-rounded center-block 
{
    margin: 0 auto;
}
</style>
keerthi vasan
  • 15
  • 2