CSS Help: Centered Img w/ Text Aligned to it

Question

I'm having trouble solving an alignment issue in a footer with css. I thought I'd try to seek some help here.

EDIT: link to jsfiddle: http://jsfiddle.net/X8Ej4/6/

Scroll down in the CSS to /** Layout Style Sheet */ for edits, sorry the base and skeleton stylesheets weren't integrating properly so I just added them all in the CSS pane.

This is an example of what I want it to be (look at the very bottom of the footer, where there is text aligned next to the milk bottle image)... http://dthudson.com/example/centered-footer.png

I can "solve" the problem by using absolute positioning but this isn't practical as the footer is going to be responsive (I'm using skeleton). I can't figure out how to code this concept but the idea I had is for the milk bottle img to be perfectly centered and then the text aligned (or floated) next to the img someway w/ marginal spacing between the text and img.

Here is the HTML...

<div class="sixteen columns>
                        <div class="center">
                        <img class="milk-logo" src="images/ccr-logo-milk.png" />
                        </div> <!-- center -->

                        <div class="left-text">
                            <p>FICTION / NON-FICTION / POETRY / ART</p>
                            <p>&copy;2013</p>
                        </div> <!-- left-text -->

                        <div class="right-text">
                            <p>CREAM CITY REVIEW</p>
                            <p>EST. 1975</p>
                        </div> <!-- right-text -->
</div>

And the CSS...

.footer .sixteen columns{ text-align:center; 
                          margin-left:auto; 
                          margin-right:auto; }

.milk-logo { display:inline-block;  }   

.sixteen .center { margin:0; }

.footer .left-text { float:left; 
                     text-align:right; 
                     display:inline; font:0.45em "Lato", sans-serif;    
                     text-transform:uppercase; 
                     letter-spacing:0.2em; 
                     color:#ebebeb; }

.footer .right-text { float:right; 
                      text-align:left; 
                      display:inline; 
                      font:0.45em "Lato", sans-serif; 
                      text-transform:uppercase; 
                      letter-spacing:0.2em; 
                      color:#ebebeb; }

Any help would be greatly appreciated. Thanks!

Answer 1

I believe the key to the answer is using display: inline-block. Add this property to all three elements and text-align: center to the parent. Then add some other minor props and there you go

.sixteen {
    text-align: center;
}
.center, .left-text, .right-text {
    display: inline-block;
    vertical-align: middle;
}
.left-text, .right-text {
    width: 200px;
}
.left-text p, .right-text p {
    display: block;
    white-space: nowrap;
}
.left-text {
    text-align: right;
    margin-right: 5px;
}
.right-text {
    text-align: left;
    margin-left: 5px;
}

Notice that I also added width: 200px to the left and right divs to make them equal. You can change this to whatever value you want. You will only have to make sure that the widths of contents inside each div won't cross this value and sum of two of this values plus the image div width won't go over the screen width.

Don't forget to change the order of the divs to correspond their real order in the layout.

<div class="sixteen columns">
        <div class="left-text">
            <p>FICTION / NON-FICTION / POETRY / ART</p>
            <p>&copy;2013</p>
        </div><div class="center">
            <img class="milk-logo" src="http://dthudson.com/example/ccr-logo-milk.png" />
        </div><div class="right-text">
            <p>CREAM CITY REVIEW</p>
            <p>EST. 1975</p>
        </div>
        <!-- right-text -->
    </div>

Updated fiddle

http://jsfiddle.net/X8Ej4/7/

Enjoy!