Как разместить текст или картинку слева, справа или посередине?

Мне многие часто задают вопрос, о том, как разместить текст или картинку в сообщении, в эпиграф дневника и/или в графе "О себе" профиля слева, справа или посередине. Ну, нет ничего проще.
Для этого придётся научится пользоваться html конструкцией "div align=выравнивание", где выравнивание может принимать одно из 3 значений: "left" (слева), "right" (справа) или "center" (в центре, посередине).

В общем виде используется такой html код:
<div align="выравнивание">То, что равняется</div>,
где выравнивание - "left" (слева) или "right" (справа).

Внимание! Для выравнивания по центру конструкция <div align="center"> не действует!
Для выравнивания по центру надо просто написать "<center>".


Пример №1 (по центру)

Чтобы добавить этот пост в цитатник, нажмите на картинку!

Код этого элемента:
<center>Чтобы добавить этот пост в цитатник, нажмите на картинку!<br /><img src="http://img1.liveinternet.ru/images/attach/c/0/38/185/38185070_Button.jpg" /></center>

Пример №2 (справа)

Чтобы добавить этот пост в цитатник, нажмите на картинку!

Код этого элемента:
<div align="right">Чтобы добавить этот пост в цитатник, нажмите на картинку!<br /><img src="http://img1.liveinternet.ru/images/attach/c/0/38/185/38185070_Button.jpg" /></div>

Пример №3 (слева)

Чтобы добавить этот пост в цитатник, нажмите на картинку!

Код этого элемента:
<div align="left">Чтобы добавить этот пост в цитатник, нажмите на картинку!<br /><img src="http://img1.liveinternet.ru/images/attach/c/0/38/185/38185070_Button.jpg" /></div>

Примечание №1
Для выравнивания налево и по центру (посередине) можно вместо этой конструкции использовать конструкции:
<left>То, что равняется</left> - для выравнивания по левому краю
<center>То, что равняется</center> - для выравнивания посередине (по центру).

Примечание №2
Для выравнивания только картинки, элемент "align" можно просто добавить в её код.
Например (выравниваем направо):
<img src="http://img1.liveinternet.ru/images/attach/c/0/38/185/38185070_Button.jpg" align="right" />
Все значения атрибута "align" и их предназначение можно прочитать тут:
Как размешать текст и картинки в одной строке?

Как подписать картинку?

Сегодня будем учиться подписывать картинки. Понимаю, что проще сделать это прямо на самой картинки, но подозреваю, что не всем такой подход нравится и не всегда это возможно.

Сегодня научу, как делать вот такую конструкцию:

Кнопка «Самоучитель по ЛиРу»

Вы не поверите, но чтобы такое сделать, придётся научится ... рисовать рамки!
Да-да! Вы не ослышались.

Толщина рамки
Может определятся в пикселях (например: "2px") или в относительных значениях ("thin", "medium" или "thick").

Цвет рамки
Определяется как обычно в html: "#123456", "rgb(123,123,123)" или просто "orange".

Типы рамок
А вот тут надо показывать.

dotted

dashed

solid

groove

ridge

inset

outset

Вот собственно и всё. Теперь надо сделать таблицу, внутрь её вставить картинку, а саму таблицу окружить рамкой.

Сложно? Тогда вот вам готовый код:
<table border="0" cellspacing="0" cellpadding="0" style="border: 1px solid black; width: 200px; margin: 3px 3px 3px 0;"><td style="padding: 3px 3px 3px 3px;"><img src="тут адрес картинки" width="ширина картинки в пикселях" height="высота картинки в пикселях" border="0" /></td><tr><td style="padding: 3px 3px 3px 3px; font-family: Verdana, Arial, sans-serif; font-size: 12px; text-align: center;">Тут подпись картинки</td></tr></table>

Хочу обратить ваше внимание на 2 момента:
1. Текст " style="border: 1px solid black;" описывает свойства вашей рамки.
Первый параметр ("1px") - это её толщина.
Второй параметр ("solid") - это её тип.
Третий параметр ("black") - её цвет.

2. Размер картинки (width="ширина картинки") должен совпадать с размером рамки ("width: 200px"). Ну, или по крайней мере быть не меньше.

Кстати, в рамки можно вставлять не только картинки.
Например:

Чайф и Би-2 «Достучаться до небес»

Update
Как сделать такой плеер?

Update №2
Как окружить текст рамкой?

Несколько простых mp3-плееров для блога

Уже несколько раз вспоминал про комплект программ Free Studio.
Сегодня познакомлю вас с 3-мя очень симпатичными девушками плеерами для вашего сайта или блога от этого набора программ:


1. Плеер-кнопка:

Состоит из одной кнопки "Воспроизведение/Пауза". Полный минимализм для тех, кому это надо.

Код плеера:

[flash=25,20,http://img1.liveinternet.ru/images/attach/c/1//3795/3795123_player.swf?mp3=ссылка на файл mp3&showslider=0&width=25&height=20&loop=0&volume=100&buttoncolor=ffffff&buttonovercolor=e0b16f&bgcolor1=d49741&bgcolor2=d38c29&bgcolor=d49741]

Подробнее про этот плеер можно прочитать тут.
Описание параметров смотрите ниже.

2. Миниплеер:

Содержит минимальный набор кнопок и функций. Для тех, кто ценит разумный компромисс.

Код плеера:

[flash=200,20,http://img1.liveinternet.ru/images/attach/c/1//3795/3795123_player.swf?mp3=ссылка на файл mp3&width=200&height=20&autoplay=0&autoload=0&loop=0&volume=100&showstop=0&showinfo=0&showvolume=0&showslider=1&loadingcolor=bbbbbb&bgcolor1=3a5b9e&bgcolor2=3d60a5&bgcolor=3a5b9e&buttoncolor=ffffff&buttonovercolor=748cbc&slidercolor1=ffffff&slidercolor2=bac2d2&sliderovercolor=748cbc&textcolor=ffffff]

Подробнее про этот плеер можно прочитать тут.
Описание параметров смотрите ниже.

3. Классический плеер:

Содержит стандартный набор кнопок и функций.

Код плеера:

[flash=200,20,http://img1.liveinternet.ru/images/attach/c/1//3795/3795123_player.swf?mp3=ссылка на файл mp3&width=200&height=20&autoplay=0&autoload=0&loop=0&volume=100&showstop=1&showinfo=1&showvolume=0&showslider=1&loadingcolor=c9c9c9&bgcolor1=565656&bgcolor2=464646&bgcolor=565656&buttoncolor=ffffff&buttonovercolor=999999&slidercolor1=ffffff&slidercolor2=bbbbbb&sliderovercolor=999999&textcolor=ffffff]

Подробнее про этот плеер можно прочитать тут.
Описание параметров смотрите ниже.


Описание параметров для всех плееров

Параметры воспроизведения
mp3
Определяет ссылку на mp3 файл.

autoplay
Определяет, будет ли воспроизведение трека начинаться автоматически или нет.
Если установлено значение равное 1 / true, то воспроизведение аудио начинается автоматически после загрузки веб-страницы, иначе (autoplay=0 / false) проигрывание mp3 трека начинается после нажатия кнопки "Воспроизведение".

autoload
Определяет, будет ли аудио автоматически загружаться сразу после открытия веб-страницы.
1 / true включает автоматическую загрузку аудио, при autoload=0 / false загрузка mp3 трека начинается после нажатия на кнопку "Воспроизведение".

loop
Устанавливает циклическое воспроизведение трека.
Возможные значения параметра: 0 или 1. Проигрывание аудио зациклено при loop=1.

volume
Задает первоначальный уровень звука. Допустимые значения данного параметра от 0 до 200.

Отображение или скрытие элементов и кнопок


showstop
Установите значение данного параметра равным 1, чтобы кнопка "Стоп" отображалась на панели плеера, в противном случае укажите showstop=0.

showinfo
Установите значение данного параметра равным 1, чтобы кнопка "Информация" отображалась на панели плеера, в противном случае укажите showinfo=0.

showvolume
Установите значение данного параметра равным 1, чтобы кнопка "Уровень Громкости" отображалась на панели плеера, в противном случае укажите showvolume=0.

showslider
Установите значение данного параметра равным 1, чтобы отображать панель плеера, в противном случае укажите showslider=0.


Параметры внешнего вида
loadingcolor
Задает цвет полосы загрузки.

bgcolor
Задает фон плеера.

bgcolor1
Задает первый (верхний) цвет фона плеера (в случае использования градиентной заливки).

bgcolor2
Задает второй (нижний) цвет фона плеера (в случае использования градиентной заливки).

buttoncolor
Задает цвет кнопок.

buttonovercolor
Задает цвет кнопок при наведении мыши.

slidercolor1
Задает первый (верхний) цвет градиентной заливки бегунка временной шкалы.

slidercolor2
Задает второй (нижний) цвет градиентной заливки бегунка временной шкалы.

sliderovercolor
Определяет цвет бегунка при наведении мыши.

textcolor
Задает цвет текста.

Кроме того, с помощью этого плеера (а если вы заметили, плеер на самом деле всего один) можно сделать альтернативный лирушному плеер для блога с плейлистом. И даже разместить его в левой колонке (см. слева в приложении "Музыкальный плеер"). Как это сделать? Скоро опишу.

Как окружить текст рамкой?

В своё время написал сообщение «Как подписать картинку?», где немного научил пользоваться рамками. А вот на вопрос, который вынес в заголовок, не ответил.


Как сделать такую конструкцию?

Текст в рамке

Нужно использовать примерно такой код:
<div style="border: 2px solid orange; width: 100px; text-align: center;"><b>Нужный текст</b></div>
Где параметр "style="border: 2px solid orange;" описывает свойства вашей рамки:
Первый параметр ("2px") - это её толщина.
Второй параметр ("solid") - это её тип.
Третий параметр ("orange") - её цвет.

Параметр "width: 100px" описывает ширину рамки (в пикселях).
Подробно про эти параметры рамки можно прочитать в сообщении, упомянутом в начале.

Параметр "text-align: center" описывает ориентацию текста внутри рамки.
Варианты:

"left" - Выравнивание текста по левой границе;

"right" - Выравнивание текста по правой границе;

"center" - Выравнивание текста по центру;

"justify" - Выравнивание текста по правой и левой границам.

Если ответов мало на возникшие ещё вопросы, то всё остальное тут ...