Reputation: 5383
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:
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
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
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