В настоящее время у меня есть небольшая HTML-страница со следующими кодами HTML / CSS внутри.
<table style="width: 300px;">
<tr style="height: 120px;">
<td width="width: 100px;">
<img src="images/lol/avatars/3.png" style="vertical-align: middle; width: 100px; height: 100px;">
<img src="images/score/3.png" style="display: block; background: #0c0c0c;" alt="3" title="5 üzerinden 3" />
</td>
<td width="width: 200px;">
aaaa bbb cccc ddddd
<h2 style="font-size: 1.6em; text-shadow: 0 -1px 1px #0c0c0c; text-transform: none; color: #fcfcfc; ">Anil wrote.<h2>
</td>
</tr>
</table>
Текущий вывод:
( Живой пример здесь: http://www.sobafire.com, под правой стороной ползунка.)
Картинка в значительной степени объясняет, что мне нужно, но я напишу ихнезависимо.
- Текст вверху (aaa bbb ...) должен быть центрирован.Кроме того, он должен автоматически центрироваться, если текст длинный.(Он не должен идти вверх или вниз, он должен идти вверх на% 50, а вниз на% 50.)
- Изображение "Score" со звездами имеет цвет фона, который равен "# 0c0c0c".Это должен быть цвет фона всей нижней области, включая «Анил написал».текст.
- «Анил написал».текст должен быть выровнен по правой стороне.
Я буду рад, если вы поможете мне в этом случае.
Ps.В текущей таблице будет 3x TR, а не один такой.Это не будет иметь никакого значения, но только примечание.
Ps 2. Добавлен живой пример для пользователей, которые хотели бы видеть его вживую.