Уценка и выравнивание изображения

191

Я делаю сайт, который публикует статьи в выпусках каждый месяц. Это просто, и я думаю, что использование редактора Markdown (например, WMD здесь, в Stack Overflow) было бы идеально.

Однако им нужна возможность выравнивать изображения по правому краю в данном абзаце .

Я не могу найти способ сделать это с нынешней системой - это возможно?

html css markdown

— Jedidja
источник

2

Почему бы просто не задать вопрос без «Я помогаю другу с некоммерческим сайтом, который публикует статьи в выпусках каждый месяц»?

— Джаллардо

11

@JGallardo Поскольку я хотел прояснить, у меня не было полного контроля над системой, и у меня не было возможности приобрести какой-либо тип решения. Я согласен, что я мог бы сформулировать вопрос по-другому.

— Джедиджа

1

Что касается редакторов уценки, вы можете использовать отличный stackedit.io/editor# , это здорово написать в нем :)

— AbdelHady

1

@AbdelHady, если бы он был доступен в 2008 году :)

— Джедиджа,

1

@iPython Как вопрос 2008 года может быть дубликатом вопроса, заданного 4 года спустя (2012)?

— Джедиджа

196

Вы можете встраивать HTML в Markdown, поэтому вы можете сделать что-то вроде этого:

<img style="float: right;" src="whatever.jpg">

Continue markdown text...

— Грег Хьюгилл
источник

43

Очистите его и стандартизируйте, удалив ненужное divи добавив закрывающую косую черту к imgтегу соответственно, то есть `<img style =" float: right "src ="

— what.jpg

Вместо этого divя предпочитаю использовать spanдля встроенного отступа. Для полного центрирования абзаца divэто хорошо, или даже просто p.

— Глаз

21

Эта работа лучше работает с некоторыми очищенными интерпретаторами, такими как GitHub: <img align = "right" src = "

— what.jpg

19

@MattDiPasquale Закрывающие косые черты не нужны. Это XHTML, а не HTML.

— CaptSaltyJack

я попытался это встроить изображение в пост блога; используя <div style = "float: right"> <img ...> </ div> правильно обведите следующий абзац вокруг изображения, тогда как <img style = "float: right" ...> поместите абзац и изображение в боксе бок о бок.

— Мартин Демелло

58

Я нашел хорошее решение в чистом Markdown с небольшим хаком CSS 3 :-)

![image alt >](/image-right.jpg)
![image alt <](/image-left.jpg)
![image alt ><](/center-image.jpg)

Следуйте за плавающим изображением кода CSS 3 слева или справа, когда image altзаканчивается <или >.

img[alt$=">"] {
  float: right;
}

img[alt$="<"] {
  float: left;
}

img[alt$="><"] {
  display: block;
  max-width: 100%;
  height: auto;
  margin: auto;
  float: none!important;
}

— OzzyCzech
источник

1

Где следует разместить CSS в каталоге MkDocs? @YannDuran

— Иван Хуан,

2

@IvanHuang просто убедитесь, что вы добавили файл extra.css согласно документации MkDocs и поместили css в этот файл.

— Янн Дюран

54

Многие «лишние» процессоры Markdown поддерживают атрибуты. Таким образом, вы можете включить имя класса следующим образом (PHP Markdown Extra):

![Flowers](/flowers.jpeg){.callout}

или, альтернативно (Maruku, Kramdown , Python Markdown ):

![Flowers](/flowers.jpeg){: .callout}

Тогда, конечно, вы можете использовать таблицу стилей надлежащим образом:

.callout {
    float: right;
}

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

— gerwitz
источник

К тому времени, как вы все это напишите: Flowers {: .callout} вы также можете написать <img src = "/ flowers.jpeg" class = "callout" />

— lfalin

1

Я согласен, но Markdown часто выбирается для пользователей, которые не * ML-грамотны, поэтому нет причин предпочитать HTML любому другому произвольному синтаксису.

— Gerwitz

4

(«Без причины», конечно, слишком упрощает. Существует множество причин, по которым вы можете захотеть, чтобы ваши редакторы стали ближе или дальше от окончательного рендеринга HTML. Или вы можете отказаться от введения зависимости HTML в свой контент, если вы выбрал Markdown, чтобы абстрагировать технику рендеринга.)

— Gerwitz

33

У меня есть альтернатива вышеописанным методам, в которых используется тег ALT и селектор CSS для тега alt ... Вместо этого добавьте URL-хэш, например, так:

Сначала код вашего Markdown изображения:

![my image](/img/myImage.jpg#left)
![my image](/img/myImage.jpg#right)
![my image](/img/myImage.jpg#center)

Обратите внимание на добавленный URL-хэш #center.

Теперь добавьте это правило в CSS, используя селекторы атрибутов CSS 3, чтобы выбрать изображения с определенным путем.

img[src*='#left'] {
    float: left;
}
img[src*='#right'] {
    float: right;
}
img[src*='#center'] {
    display: block;
    margin: auto;
}

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

— тремор
источник

1

Именно то, что я искал. Вы спаситель жизни. Я хотел бы добавить одну вещь: `` `h1 h2 {clear: both}` `` Так что следующий заголовок начинается с новой строки (не пересекается с изображением)

— bhar1red

выглядит как то, что я ищу, но ... как мне сделать CSS? и как я могу назвать это в Markdown?

— Тони Д

это также отличное решение, как и мое :)

— OzzyCzech

3

@OzzyCzech - нет, не совсем, ваше решение неправильно использует тег «alt» изображения, что может быть плохо для соответствия доступности на странице, где это решение использует подход без вторжений через тег src.

— тремор

24

Встраивание CSS это плохо:

![Flowers](/flowers.jpeg)

CSS в другом файле:

img[alt=Flowers] { float: right; }

67

Какой? Теперь вдруг вам придется редактировать внешний файл каждый раз, когда вы меняете содержание уценки? Не похоже на хорошее решение для меня.

— Джордан Рейтер

9

@JordanReiter Каждый здесь написал программу, состоящую из нескольких файлов, в которых логика распределена / организована во многих местах. Мы делаем это специально для удобства обслуживания. Почему это так больно и ужасно отличается?

— z5h

8

Markdown позволяет пользователям, не являющимся программистами, создавать контент, и он не должен зависеть от файлов, к которым необходимо непосредственно обращаться и редактировать на сервере. Другой пример: я думаю, что это совершенно нормально - жестко кодировать имена полей в базе данных в вашем коде, но ошибка в жестком кодировании, основанная на значении поля в вашей базе данных (т. Е. if product.name == 'Tulips'), Потому что вы не можете зависеть от стабильность стоимости. Все это занимает кто - то меняется Flowersк Flowerи неожиданно , что изображение появляется вне поля зрения. Кроме того, они должны звонить вам каждый раз, когда они добавляют изображение!

— Джордан Рейтер

24

@cboettig Это серьезное неправильное использование тега alt. Это должно быть текстовое описание изображения для людей, которые не могут видеть изображение.

— Натан Григг

5

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

— Аарон Робинсон

22

Мне нравится быть очень ленивым, используя таблицы для выравнивания изображений с |синтаксисом вертикальной трубы ( ). Это поддерживается некоторыми разновидностями Markdown (и также поддерживается Textile, если это плавает на вашей лодке):

| I am text to the left  | ![Flowers](/flowers.jpeg) |

или

| ![Flowers](/flowers.jpeg) | I am text to the right |

Это не самое гибкое решение, но оно подходит для большинства моих простых потребностей, легко читается в формате уценки, и вам не нужно запоминать CSS или необработанный HTML.

— learnvst
источник

2

Мне нравится этот стиль, очень уценка-у. Жаль, что он не работает на github (пока что нет.)

— Eliot

3

Я только что попробовал этот синтаксис на GitHub, и теперь он работает.

— Эге Рубак

6

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

— jxpx777

3

Для уценки github добавьте строку с |-|-|. Он сообщает парсеру, что таблица существует, а первая строка - заголовок. Пример: goo.gl/xUCRiK

— Кайла

10

Еще чище было бы просто положить p#given img { float: right }в таблицу стилей или в <head>и завернутые в styleтеги. Тогда просто используйте уценку ![Alt text](/path/to/img.jpg).

— ma11hew28
источник

8

<div style="float:left;margin:0 10px 10px 0" markdown="1">
    ![book](/images/book01.jpg)
</div>

Возможность атрибута markdownвнутри Markdown.

— Питер Мортенсен
источник

1

Работал на меня. Я не использую GitHub. Спасибо @raphox.

— Уго Таварес

Прекрасно работает с PHP-анализатором ванильной разметки michelf

— Ronan

2

Это функциональность Markdown Extra, которая включена в некоторые системы управления контентом (например, Drupal), но не включена в Markdown как таковую.

— Тим

7

Мне понравился ответ Learnvst об использовании таблиц, потому что он вполне читабелен (что является одной из целей написания Markdown).

Однако в случае анализатора Markdown в GitBook мне пришлось, в дополнение к пустой строке заголовка, добавить разделительную строку под ним, чтобы таблица была распознана и правильно отображена:

| - | - |
|---|---|
| I am text to the left  | ![Flowers](/flowers.jpeg) |
| ![Flowers](/flowers.jpeg) | I am text to the right |

Разделительные линии должны включать не менее трех штрихов ---.

— icarito
источник

7

Если вы реализуете его в Python, есть расширение, которое позволяет добавлять пары ключ / значение HTML и метки class / id. Синтаксис для этого:

![A picture of a cat](cat.png){: style="float:right"}

Или, если встроенный стиль не плавает на вашей лодке,

![A picture of a cat](cat.png){: .floatright}

с соответствующей таблицей стилей stylish.css:

.floatright {
    float: right;
    /* etc. */
}

— jameh
источник

2

Как сказал Грег вы можете встраивать HTML-контент в Markdown, но один из пунктов Markdown состоит в том, чтобы не иметь обширных (или, если на то пошло) знаний по разметке CSS / HTML, верно? Вот что я делаю:

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

'<div> // Put image here  </div>`

(конечно .. они не знают что <div> значит, но это не должно иметь значения)

Итак, файл Markdown выглядит так:

<div>
![optional image description][1]
</div>

[1]: /image/path

И в контенте CSS, который охватывает всю страницу, я могу делать все, что захочу, с тегом image:

img {
   float: right;
}

Конечно, вы можете сделать больше с контентом CSS ... (в данном конкретном случае, обтекание imgтега с помощью div предотвращает наложение другого текста на изображение ... это всего лишь пример), но ИМХО смысл Markdown в том, что вы не хотите, чтобы потенциально нетехнические люди разбирались в тонкостях CSS / HTML ... вы, как веб-разработчик, должны сделать свой CSS-контент, который оборачивает страницу, как можно более универсальным и чистым, но затем опять же ваши редакторы не должны знать об этом.

— abbood
источник

1

У меня была та же задача, и я выровнял свои изображения вправо, добавив это:

<div style="text-align: right"><img src="/default/image/sms.png" width="100" /></div>

Для выравнивания изображения по левому краю или по центру замените

<div style="text-align: right">

с участием

<div style="text-align: center">
<div style="text-align: left">

— Зуха Карим
источник

Я попробовал это, но теперь он работает .. изображение выровнено, но текст HTML отображается.

— Физа Хан

-1

эта работа для меня

<p align="center">
 <img src="/LogoOfficial.png" width="300" >
</p>

— Andersonfrfilho
источник

-16

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

<center>![Alt test](http://upload.wikimedia.org/wikipedia/en/b/bc/Wiki.png)</center>

Все, что связано с Markdown, можно проверить здесь - http://daringfireball.net/projects/markdown/dingus

Конечно, <center>может быть устаревшим, но это просто и работает!

— йо Йо
источник

1

Просто заметил, что ОП попросил правильное выравнивание - я пытался отцентрировать изображение, когда наткнулся на этот ответ.

— йо

14

Нет, никогда не используйте center.

— Джордан Рейтер

12

Я собираюсь на самом деле принять @ yoyo <center>- имеет смысл. Он устарел из HTML, потому что HTML должен описывать только контент; стили должны быть в таблицах стилей. Однако у Markdown другое назначение: включить достаточно стилей, необходимых для передачи текстового сообщения, а остальное оставить на усмотрение средства визуализации / сайта. <center>кажется гораздо более естественным, чем думать о CSS widths, floats, margins ... - Я бы даже пошел так далеко, что парсер Markdown заменил <center>теги соответствующими элементами на основе CSS, очень похоже на то, как он в настоящее время разумно вычисляет абзацы.

— Слипп Д. Томпсон