0

Bootstrap 3.3.7

I can't get an image to appear vertical centre inside a .col-md-12. I've tried to use solutions from:

The markup is straightforward:

<footer class="footer">
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-12">
                <a href="#">About</a> | 
                <a href="#">Terms</a> |
                <a href="#">Privacy</a>

                <img class="pull-right hidden-xs hidden-sm" src="footer.jpg">

            </div>
        </div>
    </div>
</footer>

The following CSS is applied to the footer:

.footer {
    height: 50px;
    line-height: 50px;
    background: red;
    font-size: 12px;
}

I've tried:

  1. Adding .center-block to the img. This does nothing.

  2. Adding a .frame around the image as per How to vertically align an image inside a div? and adjusting the width/height values accordingly. This pushes the image "underneath" the footer on to a new row.

The natural image size is 265px wide and 30px high. So I assume there is enough height (50px) on the footer for this to work.

The image is appearing at the vertical top of the footer and is not in the middle:

enter image description here

Fiddle here: https://jsfiddle.net/0m3verv9/1/

Where am I going wrong?

Andy
  • 5,142
  • 11
  • 58
  • 131
  • `center-block` works: https://jsfiddle.net/bsu9gq2q/3/ -- the line-height, height is hiding it. – Carol Skelly Feb 16 '18 at 15:02
  • My mistake, I meant *vertical* centre but had incorrectly used the word horizontal. I'm trying to do what's shown here, but within a `.col-md-12`: https://stackoverflow.com/questions/7273338/how-to-vertically-align-an-image-inside-a-div – Andy Feb 16 '18 at 15:08
  • Marking this as a duplicate is wrong because the solution given on those pages doesn't work. – Andy Feb 16 '18 at 15:28
  • Many of the answers will work.. for example: https://jsfiddle.net/xcb7L12a/ -- you just need to figure out which approach you want to use flexbox, translateY, inline-block, table cell, etc.. Also consider that vertical center is always relative to the height of the container and the `col-md-12` had no defined height. – Carol Skelly Feb 16 '18 at 15:29
  • 1
    There are many different ways: https://jsfiddle.net/r8kLrepo/ – Carol Skelly Feb 16 '18 at 15:40

0 Answers0