CODEWITHSUNDEEP
csstwitter-bootstrap
user3704744
user3704744

Reputation: 13

How to have an image stay centered vertically and horizontally when using bootstrap

I have this insanely frustrating issue involving an image on my home page.

I have a banner with an image that will resize itself in every frustrating way imaginable and it will not stay centered. After spending the better part of a day on this, I thought I'd ask. I've tried all kinds of things, and no for some reason, I'm unable to do @media step downs with height? The image is inherently 800px by 600px or half my normal banner size. I want it to stay centered as it resizes. My right col works fine - just text within. the css below works well when the resolution is between 1920X1080 and around 1300

html

<div class="row">
    <div class="col-md-6">
        <div class="bgHomeBannerImageDiv">
            <img src="~/Content/Images/image.jpg" class="bgHomeBannerImage" />
        </div>
    </div>
    <div class="col-md-6">
        <h1 class="testclass">Test<h1>
    </div>
</div>

css 

.bgHomeBannerImageDiv {
    padding:10% 25% 25% 25%; 
    height:600px; 
    width:100%;
    }

.bgHomeBannerImage {
    width:100%;
    }

Additionally, I'm not sure why I have to use padding-top at 10% to keep it vertically centered.

Any suggestions - thanks all.

Upvotes: 0

Views: 739

Answers (2)

Md. Salahuddin
Md. Salahuddin

Reputation: 1072

I did it this way.

<div class="row">
<div class="col-md-6">
 <div class="bgHomeBannerImageDiv">
    <img src="images/image_people.jpg" class="img-responsive bgHomeBannerImage"/>
</div>
</div>
<div class="col-md-6">
    <h1 class="testclass">Test<h1>
</div>
</div>

<style type="text/css">
.bgHomeBannerImage{
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    margin: auto;
 }    
.bgHomeBannerImageDiv{height: 600px;}
</style>

Upvotes: 1

SkiWether
SkiWether

Reputation: 38

Have you tried adding the "img-responsive" Bootstrap class to the img tag?

Upvotes: 0

Related Questions