Форумы портала PHP.SU :: Версия для печати

Warning: Cannot use a scalar value as an array in /home/admin/public_html/forum/include/fm.class.php on line 757

Warning: Invalid argument supplied for foreach() in /home/admin/public_html/forum/include/fm.class.php on line 770
Форумы портала PHP.SU :: Версия для печати :: Картинка и текст

Форумы портала PHP.SU » Клиентская разработка » HTML, Дизайн & CSS » Картинка и текст

Страниц (1): [1]

1. IncOness - 24 Августа, 2015 - 20:16:18 - перейти к сообщению

Всем привет.

Столкнулся с такой проблемой: пришлось поставить картинку 16x16 и после нее текст, в итоге получилось так, что картинка высокая, а текст в самом низу. Как можно выровнять их вертикально по центру, т.е. чтобы они были на одном уровне? Изменять размер шрифта не вариант.

Спасибо.

2. lastdays - 24 Августа, 2015 - 22:33:17 - перейти к сообщению

CODE (htmlphp):
скопировать код в буфер обмена

 
vertical-align:middle;
 

3. IncOness - 24 Августа, 2015 - 22:41:36 - перейти к сообщению

lastdays пишет:

CODE (htmlphp):
скопировать код в буфер обмена

vertical-align:middle;

Не помогает.

Вот мой код:

CODE (html):
скопировать код в буфер обмена

<td style="text-align: center; color: #FFFFFF; font-size: 14px;"><img src="16x16.png"> Текст</td>

Пробовал вставить в стиль ячейки vertical-align, тоже не помогло.

4. lastdays - 24 Августа, 2015 - 22:46:34 - перейти к сообщению

CODE (html):
скопировать код в буфер обмена

<td style="text-align: center; color: #FFFFFF; font-size: 14px;"><img style="vertical-align:middle;" src="16x16.png"> Текст</td>
 

5. broshurkaplus - 24 Августа, 2015 - 22:50:54 - перейти к сообщению

попробуйте тексту в этом элементе увеличить line-height
bили заверните его в другой элемент и задайте отступы

6. IncOness - 24 Августа, 2015 - 22:52:16 - перейти к сообщению

lastdays пишет:

CODE (html):
скопировать код в буфер обмена
<td style="text-align: center; color: #FFFFFF; font-size: 14px;"><img style="vertical-align:middle;" src="16x16.png"> Текст</td>

Спасибо, помогло.

Только не понимаю, почему текст выравнился вместе картинкой по вертикали, если стиль был задан только для картинки?

И есть еще такой вопросик, если несложно: каким нормальным способом через CSS можно сделать это таким способом, чтобы напрямую картинку нельзя было вытащить? Т.е. чтобы нельзя было ее сохранить из контекстного меню. Когда обычная картинка через <img>, можно, когда картинка через CSS, нельзя. Вопрос: как это красиво оформить?

Спасибо.
(Добавление)

broshurkaplus пишет:

попробуйте тексту в этом элементе увеличить line-height
bили заверните его в другой элемент и задайте отступы

Спасибо, что напомнили, был такой вопрос... Не могли бы вы объяснить как правильно использовать line-height? Т.к. я не совсем понимаю принцип его действия и правильного использования, сколько мануалов по нему прочитал...

7. lastdays - 24 Августа, 2015 - 22:54:50 - перейти к сообщению

IncOness пишет:

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

наложить поверх другую картинку (прозрачную картинку)

8. IncOness - 24 Августа, 2015 - 22:55:40 - перейти к сообщению

lastdays пишет:

наложить поверх другую картинку

Можно пример, если не затруднит?

9. lastdays - 24 Августа, 2015 - 23:05:43 - перейти к сообщению

IncOness пишет:

lastdays пишет:

наложить поверх другую картинку

Можно пример, если не затруднит?

CODE (html):
скопировать код в буфер обмена

<div class="con">
<img src="16x16.png" width="80" height="80">            <!-- Картинка -->
<img src="1x1.gif" width="80" height="80"  class="top"> <!-- Прозрачная картинка -->
</div>
 
<style>
.con {position:relative}
.top {position:absolute;top:0;left:0;}
</style>

10. IncOness - 24 Августа, 2015 - 23:16:21 - перейти к сообщению

lastdays пишет:

CODE (html):
скопировать код в буфер обмена
<div class="con">
<img src="16x16.png" width="80" height="80"> 
<img src="1x1.gif" width="80" height="80" class="top"> 
</div>

<style>
.con {position:relative}
.top {position:absolute;top:0;left:0;}
</style>

К сожалению, не сработало, но спасибо за помощь. Пороюсь в гугле.

11. broshurkaplus - 24 Августа, 2015 - 23:43:55 - перейти к сообщению

так гуглим line-height -первый же сайт http://htmlbook[dot]ru/css/line-height
все равно стырят кому надо.
а вообще делайте цсс спрайт для мелких картинок, тк каждая картинка тормозит загрузку а будет одна...
нет смысла защищать..., но если надо то знак на изображение и защита нотариально, тогда можно и в суде потягаться в случае чего. но повторюсь смысл защищать стремиться к 0

12. Марат Мхитарян - 10 Октября, 2015 - 16:59:35 - перейти к сообщению

чел воспользуйся этим кодом

PHP:
скопировать код в буфер обмена

 
header("Content-type: image/png"); 
$string = "test"; 
$im    = imagecreatefromjpeg("img_01.jpg"); //тут где находится картинка
$orange = imagecolorallocate($im, 220, 210, 60); 
imagestring($im, 3, 49, $string, $orange); 
imagepng($im); 
imagedestroy($im); 
 