Search code examples
htmlimagefootervertical-alignmenttext-align

Vertical alignment of image and text, while centering text and floating image to the left

I've looked at a few posted solutions for centering the vertical alignment of an image and text (such as these: Vertically align text next to an image?)

However, I'm also trying to fix the image to the left, and horizontally center the text.. just like in a footer, where an image would be "pinned" on the left and the navigation ( or disclaimer text) would be horizontally centered in that footer (and it's position would adjust depending on the size of the viewport).

This is what I have so far:

    <div style="width:100%; text-align: center;">
        <img src="logo.png" alt="my logo" style="vertical-align:middle; float: left;" />
        <span>Copyright 2015 by Company, LLC. All Rights Reserved</span>
    </div>

Adding "float: left;" disables "vertical-align:middle;". However, if I remove the float property, I'm not sure how to pin the logo to the left then.

Any ideas how i can achieve this. Just looking for a simple answer, nothing too complex.

Thanks!

Solution

  • A solution that seems to work with float (at least in chrome)

    <div class="container">
    <img src="http://lorempixel.com/400/200/"/>
    <div class="text">this is some text</div>
</div>

* {
box-sizing: border-box;
}
.container {
width: 100%;
text-align: center;
border: 1px solid red;
display: table;
}

img {
float: left;
}

.text {
border: 1px solid blue;
display: table-cell;
vertical-align: middle;
height: 100%;
}

    fiddle: http://jsfiddle.net/u7cjLL1f/

    If you would like the text to take up the entire parent div and go over the image: http://jsfiddle.net/u7cjLL1f/1/