CSS with Image Div and Text Div for the same baseline

Question

I'd like to place a Div for image and a Div for text at the same baseline. Below is my sample code and JSFiddle.

enter image description here

<div class="wrap">
    <div class="img">
        <img src="http://www.cssportal.com/images/cssportal.png" />
    </div>
    <div class="txt">
        This is text.
    </div>
</div>

<style>
    .wrap { width: 500px;}
    .img { float: left; }
    .txt { }
</style>

============ Update ================

Originally, there should be some empty space between image (logo at left-top corner) and text (navigation at right-top) with same baseline with image logo.

score 6 · Accepted Answer · answered Jan 09 '15 at 13:55

6

Drop the float from your .img element and instead set both .img and .txt to display: inline:

.img, .txt { 
    display: inline;
}

Then set .txt to have a vertical-align of baseline:

.txt {
    vertical-align: baseline;
}

JSFiddle demo.

enter image description here

answered Jan 09 '15 at 13:55

James Donnelly

126,410
34
208
218

Thank you for the comment and it works. But, as I updated, I might have to use float to place image and text in the exact place. How to use float with your solution. – Jay Jan 09 '15 at 14:00
@Jay perhaps a better solution would be to set your `.wrap` element to `display: table` with a `width` of 100%, and your `.img` and `.txt` elements to `display: table-cell`. Then set your `.txt` element to have a `text-align` set to `right`. – James Donnelly Jan 09 '15 at 14:02
@Jay: There's usually a (easier) way around positioning than floating elements. – jbutler483 Jan 09 '15 at 14:04
@JamesDonnelly I tested with your comment, but it present two rows. http://jsfiddle.net/xLrf7pyt/3/ – Jay Jan 09 '15 at 14:08
@Jay that's the JSFiddle demo I linked in my answer. – James Donnelly Jan 09 '15 at 14:09
@jutler483 if I use the position, I might have to set exact pixels. The site will be responsive and I don't want to use conditions for this. – Jay Jan 09 '15 at 14:10
You have `display: text-cell` instead of `display: table-cell`. http://jsfiddle.net/xLrf7pyt/5/ – James Donnelly Jan 09 '15 at 14:15

score 0 · Answer 2 · answered Jan 09 '15 at 14:02

Use display:inline;

    .wrap { width: 500px;}
    .img { display:inline; }
    .txt { display:inline; }

<div class="wrap">
    <div class="img">
        <img src="http://www.cssportal.com/images/cssportal.png" />
    </div>
    <div class="txt">
        This is text.
    </div>
</div>

CSS with Image Div and Text Div for the same baseline

2 Answers2