Bootstrap 3 making images centre and content vertically center

Question

I am struggling with trying to align my responsive images center. If I don't use the <img-responsive> tag they do align centre.

The images are the grey placeholder squares, I want them to be placed center above the text, and then the text AND images to be aligned vertical.

I am using Bootstrap 3

Here is my code.

<html>
<head>
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/styles.css" rel="stylesheet">
<title>Layout3</title>
<style>
    .panel1 {
        background-color: pink;
        height:768px;
        align-items: center;
    }
    .panel2a {
        background-color:white;
        text-align: center;
        align-content: center;
        height:384px;
        margin:0 auto;
    }
    .panel2b {
        background-color:#3DB39E;
        text-align: center;
        align-content: center;
        height:384px;
        margin:0 auto;
}

.panel3 {
    background-color:#efc75e;
    height:768px;
}
.panel4 {
    background-color:#e2574c;
        height:768px;

}
.panel5 {
    background-color:#3db39e;
        height:768px;

}
.panel6 {
    background-color:#e2574c;
        height:768px;

}
.footer {
    background-color:#000000;

</style>
    </head>
    <body>
    <div class="container-full">


<div class="col-lg-12 panel1">
      <div class="col-lg-6">
        <img class="img-responsive" src="http://placehold.it/456x366" alt="" />    
    </div>
    <div class=" col-lg-6">
            <h1>Title</h1>
         <p class="lead">description</p>
            <p><input type="text" class="form-control" placeholder="e-mail"><a class="btn btn-large btn-success" href="#" target="ext">NOTIFY ME</a></p>
    </div>
</div>



<div class="row vcenter">
                <div class="col-xs-12 col-md-4 panel2a">
                    <img class="img-responsive" src="http://placehold.it/80x91" alt="" />
                    <h1>1</h1>
                    <p>abc</p>
                </div>

                <div class="col-xs-12 col-md-4 panel2a">
                    <img class="img-responsive" src="http://placehold.it/80x91" alt="" />
                    <h1>2</h1>
                    <p>def</p>
                </div>
    <!-- 2b -->

                <div class="col-xs-12 col-md-4 panel2a">
                    <img class="img-responsive" src="http://placehold.it/80x91" alt="" />
                    <h1>3</h1>
                    <p>ghi</p>
                </div>




                <div class="col-xs-12 col-md-4 panel2b">
                    <img class="img-responsive" src="http://placehold.it/80x91" alt="" />
                    <h1>4</h1>
                    <p>jkl</p>
                </div>
                <div class="col-xs-12 col-md-4 panel2b">
                    <img class="img-responsive" src="http://placehold.it/80x91" alt="" />
                    <h1>5</h1>
                    <p>mno</p>
                </div>
                <div class="col-xs-12 col-md-4 panel2b">
                    <img class="img-responsive" src="http://placehold.it/80x91" alt="" />
                    <h1>6</h1>
                    <p>pqr</p>
                </div>
</div>


>




</div> <!-- /container full -->

        </body>
    </html>

Here is a [**bootply**](http://www.bootply.com/Hf6lUH2WfN) I made if anyone wants to try to solve this problem — Simple Sandman, Sep 05 '14 at 20:30
http://stackoverflow.com/questions/25645881/bootstrap-3-2-vertical-align-image-next-to-text-without-knowing-height/25651881#25651881. First you need to make the col-* equal heights because the heights are only the height of the content, not the height of the parent (row), to horizontally center a block element (which is what img-responsive does) you can put the class "center-block" on the image or write some "margin: 0 auto" on the image-responsive class (it will be global then) — Christina, Sep 05 '14 at 20:50

score 0 · Accepted Answer · answered Sep 06 '14 at 02:53

You can get rid of most of your inline css and apply this general concept to each of your image containers:

<div class="outer" >
  <div class="inner">
    <img class="img-responsive center-block" src="//placehold.it/200x100" />
    <span class="text-center">Description</span>  
  </div>
</div>

CSS

.outer {
   display: table;
   width: 100%;
}
.inner {
   display: table-cell;
   text-align: center;
   vertical-align: middle;
}

DEMO: http://www.bootply.com/rE4V28TBqw

Bootstrap 3 making images centre and content vertically center

1 Answers1