CODEWITHSUNDEEP
javascripthtmlcsstwitter-bootstrapless
user84756
user84756

Reputation: 1275

Vertically center responsive image in a bootstrap column

I have reviewed all of the existing questions / answers, and still cannot get a working solution, so I would appreciate any comments on my particular code below.

I would prefer not to use hard-coded image sizes (pixel counts) in my code, and I am willing to use a combination of Less, CSS, or Javascript in the solution.

The image should be centered vertically and horizontally within the Bootstrap column, and remain centered even when the screen is resized.

My HTML:

<div class="container-fluid">
    <div class="container">
    <div class="row">
        <div class="col-md-5">
            <div class="panel">
                Some content
            </div>
        </div>

        <div class="col-md-2">
            <img src="images/myimage.png" class="img-responsive center-block">
        </div>

        <div class="col-md-5">
            <div class="panel>
               Some content
            </div>
        </div>
     </div>
     </div>
 </div>

Upvotes: 6

Views: 30963

Answers (3)

Muhammad Talha
Muhammad Talha

Reputation: 11

Hope this will solve your problem. Use following CSS property for making the image vertically centered

img { vertical-align: middle; }

For horizontal alignment use class name text-center of bootstrap along with the other class name of your div if yu have. Like,

<div class="col-md-2 text-center"> ... </div>.

It will make the content of the div horizontally centered.

Upvotes: -1

Anupam Basak
Anupam Basak

Reputation: 1523

You can overcome the vertical align problem by using css Flexbox.

Add the class "vertical_center" to the parent div.

Then add the following css

.vertical_center {
    display: flex;
    align-items: center;
}

Upvotes: 6

Patrick
Patrick

Reputation: 882

Here's an option using transform:

html,body,.container-fluid,.container,.row,.row div {height:100%;;} /* full height for demo purposes */
.vertical-center {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}
.col-md-2 {background-color:#ccc;} /* just to demonstrate the size of column */

http://www.bootply.com/YG8vpg1rIf

Upvotes: 18

Related Questions