0

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!

Community
  • 1
  • 1
mustang888
  • 205
  • 1
  • 2
  • 16

2 Answers2

1

set width and height for , don't use float Example:

<div style="width:100%; text-align: center;">
    <img src="logo.png" alt="my logo" style="width:200px; height:200px;vertical-align:middle;display:inline-block" />
    <span>Copyright 2015 by Company, LLC. All Rights Reserved</span>
</div>
Dyah Isnaeny
  • 31
  • 2
  • Thanks for the code! however, the image is centered as well (horizontally). Is there a way to make it pinned on the far left, while keeping the text centered? – mustang888 Jan 06 '15 at 16:19
1

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/

Joe Sager
  • 787
  • 4
  • 9
  • Thanks for sharing! Is there a way to make the text centered inside the whole container.. right now, it looks like there are two cells and the text is centered in its own cell. So I guess make the width of the first cell (where the image is) the same as the width of the image. – mustang888 Jan 06 '15 at 16:13
  • if you add `width: 100%` to `.text` it will make the text take up the space not taken by the image, do you want the text to be over the image? – Joe Sager Jan 06 '15 at 16:49
  • ^ I implemented the other solution in the answer (text over image) – Joe Sager Jan 06 '15 at 16:55
  • Thanks! Adding width: 100% to .text did it! Much appreciated! – mustang888 Jan 08 '15 at 16:38