Как выровнять картинку в статье: по центру, левому и правому краю


Представляю вам краткую шпаргалку, как красиво оформить свою статью и выровнять картинки по центру, левому и правому краях.

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

Выравнивание картинки по левому краю

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

Ваш тест рядом с картинкой. Объем текста вокруг картинки зависит от ее размера.

К примеру, этот текст взят из официального Wiki Голоса

Говоря простыми словами, Голос - это социальная платформа. То есть место для общения пользователей. В Голосе Вы можете опубликовать свою статью о том, что Вы любите, можете поделиться своими фотографиями, а можете просто вести свой блог.

Другими словами, Голос чем-то похож на смесь обычной социальной сети наподобие Фейсбука и более комплексной платформы для блогеров, наподобие Живого Журнала.

В Голосе нет приоритета для тех или иных материалов, но чем лучше материал (далее - контент), который Вы публикуете тем больше шансов у Вас заработать... да-да, именно заработать!

Выравнивание картинки по центру

Используйте этот код, чтобы выровнять картинку по центру.

<center></center>Ваш текст под картинкой.

К примеру, этот текст взят из официального Wiki Голоса

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

Выравнивание картинки по правому краю

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

Ваш тест рядом с картинкой. Объем текста вокруг картинки зависит от ее размера.

К примеру, этот текст взят из официального Wiki Голоса

Это легально?

Совершено! Так как процесс децентрализации площадки относится только к её управлению, а не к тому, что происходит в реальном мире, то право выбора управления остается за её владельцами (в случае децентрализации - всеми её пользователями, так как каждый является владельцем).

Если Вам интересно почитать еще о философии децентрализации советую вот эту статью

Если вам важно указать источник картинки

Используйте этот код, чтобы указать источник картинки

<center><br/><em>Интернет:</em></center>


Интернет

Надеюсь, эта статья оказалась полезной для вас. Спасибо за внимание!


Comments 28


Только код квотить нужно, а то он вывелся уже рендером. @naminutku

23.06.2017 08:52
0

ерунда творится. оформил статью с кодом и код показывался в превью. опубликовал: каша, а не статья.

23.06.2017 08:58
0

23.06.2017 09:02
0

выложил код на Пастебине.

23.06.2017 09:32
0

Видишь на скрине по три тильды вокруг тега img - и все равно MD говорит что не правильная картинка - хотя не должен в нем отрабатывать=)

23.06.2017 12:16
0

А где код?

23.06.2017 08:55
0

не понимаю что произошло. напечатал статью: был код. обновил: страница в каше.

23.06.2017 08:57
0

выложил код на Пастебине.

23.06.2017 09:32
0

Выложи код всего поста куда нибудь

23.06.2017 09:35
0

Спасибо, @naminutku!!! Попробую))))

23.06.2017 08:55
0

Как выровнять только текст по правому краю?

23.06.2017 08:59
0
Моя мечта сделать так, чтобы текст обтекал картинку. Как-то я попыталась сделать это с помощью операторов html. Во внешнем редакторе выглядело как надо, а редактор Голоса превратил всё в ужасную кашу. Мои попытки эту кашу разобрать ни к чему не привели и я забросила идею подальше. А недавно у кого-то увидела пост такой, как я хочу. Спросить сразу не рискнула, а теперь не помню, у кого это было...
)
23.06.2017 09:21
0

выложил код на Пастебине.

23.06.2017 09:33
0

Спасибо, попробую.

23.06.2017 10:30
0

Интересно открывает, то ссылка, то текст.

23.06.2017 09:47
0

@naminutku ничего не поняла)) объясните блонде плиз))) куда этот код вставлять?)

23.06.2017 10:20
0


копируете этот код https://pastebin.com/jAQLpYvc.
меняете в нем ссылку на картинку на свою.
и под кодом пишите этот текст. например, здесь я выровнял картинку по правому краю и теперь весь текст расположен слева от картинки.

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

23.06.2017 10:43
0

@naminutku то есть вставлять в поле, где пишу сам пост? Не в ту строку, куда обычно вставляю ссылку на картинку?)

23.06.2017 10:48
0

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

23.06.2017 10:53
0

@naminutku я это тут переключить могу? И код в текст вставлять? Вечером позже пост писать буду опробую

23.06.2017 11:21
0

да

23.06.2017 11:37
0

@naminutku А можно в Редакторе вставить текст и ссылки, а потом вернутся в прежний режим, чтоб отредактировать текст, выделить что-то жирным?

23.06.2017 12:37
0
Понял твою ошибку. Надо вместо открывающих и закрывающих тегов ```

...
``` Писать три тильды ``` вначале и конце. ``` Ваш тест рядом с картинкой. Объем текста вокруг картинки зависит от ее размера.``` После закрывающего тега ``` ``` не должно быть перевода строки. Либо использовать HTML редактор вместо markdown разметки. ```

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

<div class="pull-left"><img src="http://imgdepo.com/id/10546719.jpg" /></div> Ваш тест рядом с картинкой. Объем текста вокруг картинки зависит от ее размера.
Говоря простыми словами, Голос - это социальная платформа. То есть место для общения пользователей. В Голосе Вы можете опубликовать свою статью о том, что Вы любите, можете поделиться своими фотографиями, а можете просто вести свой блог.
```
23.06.2017 11:15
0

ну ты просто не понимаешь, что только что сделал!

23.06.2017 11:33
0

Спасибо за пиво :)))

23.06.2017 11:47
0