CODEWITHSUNDEEP
htmlcss
Erçin Dedeoğlu
Erçin Dedeoğlu

Reputation: 5383

How to put text and image in a same line?

How can I put text and image in a same line, like centered to image? I tried some method, like vertical-align:middle; display: inline; but not working... where is my mistake?

Now:

enter image description here

my css code:

<style>
    .entryDetailX {
        float: right;
        background: #2B587A;
        -moz-border-radius-topleft: 8px;
        -webkit-border-top-left-radius: 8px;
        -moz-border-radius-bottomright: 8px;
        -webkit-border-bottom-right-radius: 8px;
        font-weight: bold;
        color: #FFF;
        padding: 6px;
    }
    .date {
        float: right;
        font-size: 9px;
        padding-top: 1px;
        background: url(/content/themes/mavi/img/custom/icon_time16x16.png) top left no-repeat;
        padding-left: 20px;
        margin-right: 10px;
    }
    .nick {
        float: right;
        margin-right: 20px;
        color: #cc9900;
        background: url(/content/themes/mavi/img/custom/icon_user16x16.png) top left no-repeat;
        padding-left: 20px;
    }
</style>

HTML:

<div class="entryDetailX">
    <span class="date">18.01.2011 00:50:55</span>
    <a class="nick">phantasm</a>
</div>

Thanks

Upvotes: 1

Views: 799

Answers (3)

tzi
tzi

Reputation: 9489

There is a property, named background-position, to decide the background position. It takes two values, one for horizontal and one for vertical position. It could take center for both values.

When you write the following line of code, you set the background-position using the shorthand background. You explicitly ask to align the background is the top left corner.

background: <background-image> <background-position> <background-repeat>;
background: url() top left no-repeat;

You should write this code to vertically center your background image:

background: url() center left no-repeat;

You can play with this property on this jsfiddle.

Cheers, Thomas.

Upvotes: 1

Tasos K.
Tasos K.

Reputation: 8087

The images are background images and you need to set their position in the background css property. So, instead of top you can set center. 

.date {
    background: url(/content/themes/mavi/img/custom/icon_time16x16.png) left center no-repeat;
}
.nick {
    background: url(/content/themes/mavi/img/custom/icon_user16x16.png) left center no-repeat;
}

If the above doesn't work, you can set how low the image to be in pixels. So, if you want the images to be 8px lower you can set 

.date {
    background: url(/content/themes/mavi/img/custom/icon_time16x16.png) left 8px no-repeat;
}
.nick {
    background: url(/content/themes/mavi/img/custom/icon_user16x16.png) left 8px no-repeat;
}

Upvotes: 1

rrugbys
rrugbys

Reputation: 282

You just need to Add the

 background-position:left center;

Check on Fiddle

Upvotes: 6

Related Questions