CODEWITHSUNDEEP
csstwitter-bootstrap-3responsive-design
Miomir Dancevic
Miomir Dancevic

Reputation: 6852

Bootstrap 3 center image

I am trying to put image always at middle and center in some element, only problem is that it does not work

Here is my code

CSS

.panel - empty {
        width: 100 % ;
        height: 400 px; /* for demo only */
    }
    .panel-empty-inside {
        display: table-cell;
        text-align: center;
        vertical-align: middle;
    }
    .box-inside {

        display:inline-block;
        vertical-align: top;
    }

And HTML

   <div class="panel-empty">
                <div class="panel-empty-inside">
                    <div class="box-inside">
                        <img class="img-responsive center-block" src="http://www.gusonthego.com/wp-content/uploads/2012/04/Gus-Flying-Banner-Hello-nBG.png" alt="Banner"/>
                    </div>
                </div>
            </div>

And here is working fiddle https://jsfiddle.net/DTcHh/9395/

Upvotes: 0

Views: 4455

Answers (4)

Da-FyK
Da-FyK

Reputation: 1060

You are using class img-responsive which adds display:block to your image and can't be centered using text-align:center. You can center block elements of known width with margin:0 auto. Take a look at fiddle https://jsfiddle.net/DTcHh/9397/

Upvotes: 5

Dhaval Gadher
Dhaval Gadher

Reputation: 72

Please remove the height and width in .panel-empty class and remove the display:table-cell,text-align:center in .panel-empty-inside class then run and it is work.

    .panel-empty{
        text-align:center;
    }
    .panel-empty-inside {
        vertical-align: middle;
    }
    .box-inside {
        display:inline-block;
        vertical-align: top;
    }

Upvotes: 0

Aruna
Aruna

Reputation: 61

You need to add display: table to the container with display:table-cell

Over here, you need to add

.panel-empty {
display:table;
}

Upvotes: 0

Marcos P&#233;rez Gude
Marcos P&#233;rez Gude

Reputation: 22158

You must to put a height in the parent of the image.

.panel-empty-inside {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
    height: 400px;
}

It works fine.

Upvotes: 0

Related Questions