Текст изображения на той же строке

Я долго пытался отобразить изображение рядом с текстом. Я хочу отобразить изображение ресурсов/rupee.png в той же строке, что и стоимость, но стоимость отображается в нижней части изображения. Вот мой PHP код:Текст изображения на той же строке

... 
    $display_query = mysql_query("SELECT * FROM eportal"); 

         echo "<table id='pageTable'><thead><tr><th>Item code</th><th>Image</th><th>Description</th><th>Cost</th></tr></thead>"; 
         echo "<tbody>"; 
         while($row = mysql_fetch_array($display_query)){ 
          echo "<tr><td>".$row['itemid']."</td><td>"; 
          echo '<img src="resources/wh/'.$row['itemid'].'.png" title="'.$row['itemid'].'"/>'; 
          echo "</td><td>".$row['description']."</td><td><span>"; 
          echo '<img src="resources/rupee.png" />'; 
          echo '</span><span class="cost">'.$row['cost'].'</span></td></tr>'; 
         } 
         echo "</tbody>"; 
         echo "</table>"; 
...

и соответствующий CSS: (Может быть, я испортил мой CSS код пытается сделать это в течение длительного времени)

#pageTable span{ 
    float:left 
} 
#pageTable .cost{ 
    float:left; 
} 
#pageTable span img{ 
    padding:3px 0 0 0; 
    display : inline !important; 
}

источник

2012-06-14 xan

CSS работает с HTML, ваш php совершенно не имеет значения на вопрос; отправьте соответствующий HTML-код, который отправляется в браузер («источник просмотра»). –

.. 500 ... – xan

Я сделал это, установив свойство margin. Но мне нужен был более оптимизированный путь! – xan

Хотя это не может напрямую ответить на ваш конкретный запрос, я бы сказал, что вы не должны пытаться выполнить задачу таким образом (если вы все еще хотите использовать элемент «img», как в вашей текущей разметке , некоторые из других предлагаемых решений должны работать нормально).

Если бы я создавал это приложение, я бы либо использовал соответствующие символы Юникода для выражения валют (http://en.wikipedia.org/wiki/Indian_rupee_sign), либо просто использовал текст («Индийские рупии» или что-то еще). Если вы do хотите использовать специальный символ изображения, я бы склонен препятствовать вам использовать «img» перед каждой суммой денег, так как это создаст много повторений и, на мой взгляд, не очень чисто. Хорошее решение может быть использовать некоторые CSS псевдо-элементы на некоторых пользовательских классах:

HTML:

<span class="currency rupee">500</span>

CSS:

.currency:before { 
    vertical-align:-2px; 
    margin-right:5px; 
    width: 16px; 
    height: 16px; 
} 
.rupee:before { 
    content: url(resources/rupee.png); /* Little 16x16 currency symbol */ 
}

источник

2012-06-14 10:33:11

Символ Unicode для «Рупии» не работает в каждом браузере. Это было первое, что я пробовал. Для всех специальных символов я всегда использую символы Unicode. – xan

Да, к сожалению, символ Рупии - Unicode 6.0+. Другие альтернативы, которые я указал в своем сообщении, должны работать как прекрасные альтернативы (как и шрифт значка, если это путь, по которому вы хотите спуститься). –

Да. Хотя, спасибо за «до» отзыв. Я совсем забыл об этом. – xan

Конечно, вы можете просто иметь изображение и текст в отдельно с.в. ...

как: (слева из всех атрибутов и т.д.)

<tr> 
    <td><img /></td> 
    <td><span></span></td> 
    <td><img /></td> 
    <td><span></span></td> 
    <td><img /></td> 
</tr>

источник

2012-06-14 10:03:08

Нет ли лучшего способа? – xan

Разве вы не можете просто выровнять их так? Я не думаю, что вам нужен какой-то причудливый CSS, если это не требует его макета.

<img src="resources/rupee.png" style="vertical-align: middle"> COST_TEXT_HERE

источник

2012-06-14 10:12:44 tradyblix

Я нашел способ. Изменено свойство margin. – xan

используйте Выровнять по метке изображений

<img src="" align="texttop" />

источник

2012-06-14 10:14:33

В CSS: style = "vertical-align: text-top". Лучшее решение, которое я нашел для этой проблемы. В зависимости от высоты изображения «текст-снизу» может быть лучше. – Alsciende

кажется, что вы просто хотите использовать символ валюты в качестве изображения в тексте. Используйте более простой подход:

<img src="resources/rupee.png" alt="Rs " style="height: 1em" />42.00

(замените 42.00 любым кодом, который вы используете для вставки фактического номера).

В зависимости от дизайна изображения вам может потребоваться настроить его вертикальное положение с помощью CSS (vertical-align или, более того, относительное позиционирование), чтобы символ находился в исходном тексте. Чтобы получить помощь в такой настройке, разместите URL-адрес изображения.

источник

2012-06-14 10:15:39

Спасибо. Но я изменил свойство маржи моей стоимости. – xan

<html> 
    <head> 
    <style> 
    img{ 
     display : inline !important; 
    } 
    </style> 
    </head> 
    <body> 
    <table> 
    <tr> 
    <td><img src="img.png"><span class="cost">cost</span></td> 
    </tr> 
    </table> 
    </body> 
    </html>

источник

2012-06-14 10:38:35

Что не так с помощью «display: inline;» на «img»? –

joesavage, вы плотно, дисплей: блок не нужен. Я удалил его. –

Текст изображения на той же строке

ответ

Смежные вопросы