Как разместить текст и изображение в одной строке?

Question

Как я могу поместить текст и изображение в одну и ту же строку, например, по центру изображения? Я пробовал какой-то метод, например, вертикально-выровнять: средний; display: inline; но не работает ... где моя ошибка?

Сейчас:

мой код CSS:

<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> 

Благодаря

Answer 1

Вам просто нужно добавить

background-position:left center; 

Check on Fiddle

Answer 2

Изображений являются фоновыми изображениями, и вы должны установить свою позицию в свойстве background CSS. Итак, вместо top вы можете установить 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; 
} 

Если вышеуказанное не работает, вы можете установить, как изображение должно быть в пикселях. Итак, если вы хотите, чтобы изображения быть 8px ниже вы можете установить

.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; 
} 

Answer 3

Существует свойство, названное background-position, чтобы решить положение фона. Он принимает два значения: одно для горизонтального и одно для вертикального положения. Для обоих значений может принимать значение center.

При написании следующей строки кода вы устанавливаете background-position, используя стенопись background. Вы явно запрашиваете выравнивание фона в верхнем левом углу.

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

Вы должны написать этот код для вертикального центрирования фонового изображения:

background: url() center left no-repeat; 

Вы можете играть с этим свойством на this jsfiddle.

Cheers, Thomas.