Уценка и выравнивание изображений
Я делаю сайт, на котором ежемесячно публикуются выпуски статей. Это просто, и я думаю, что использование редактора Markdown (например, ОМУ здесь, в Stack Overflow) было бы идеальным.
Однако им действительно нужна возможность выровнять изображения по правому краю в данном абзаце.
Я не вижу способа сделать это в текущей системе - возможно ли это?
Почему бы просто не задать вопрос без «Я помогаю другу с некоммерческого сайта, который публикует статьи в выпусках каждый месяц»?
@JGallardo Потому что я хотел прояснить, что у меня нет полного контроля над системой, и у меня не было возможности приобрести какое-либо решение. Согласен, я мог бы иначе сформулировать вопрос.
Из редакторов разметки можно использовать отличный stackedit.io/editor#, писать в нем классно :)
@AbdelHady, если бы он был доступен в 2008 году :)
@Jedidja 2008! .. ой, я этого не ожидал :)
Возможный дубликат центральное изображение github README.md
@iPython Как вопрос из 2008 г. может быть дубликатом вопроса, заданного 4 годами позже (2012 г.)?
Ответы 14
Вы можете встроить HTML в Markdown, чтобы сделать что-то вроде этого:
<img style = "float: right;" src = "whatever.jpg">
Continue markdown text...
Очистите его и стандартизируйте, удалив ненужный div и добавив закрывающую косую черту к тегу img, соответственно, то есть `<img style = " float: right "src = " Any.jpg "/>
Вместо div я предпочитаю использовать span для встроенного отступа. Для центрирования всего абзаца хорош div или даже простой p.
Это лучше работает с некоторыми очищенными интерпретаторами, такими как GitHub: <img align = "right" src = "Any.jpg" />
@MattDiPasquale Закрывающие косые черты не нужны. Это XHTML, а не HTML.
Я пробовал это, чтобы вставить изображение в сообщение блога-призрака; с помощью <div style = "float: right"> <img ...> </div> правильно обтекает следующий абзац вокруг изображения, тогда как <img style = "float: right" ...> помещает абзац и изображение в бок о бок.
<div style = "float:left;margin:0 10px 10px 0" markdown = "1">
</div>
Возможность атрибута markdown внутри Markdown.
Работал мне. Я не использую github. Спасибо @raphox.
Прекрасно работает с парсером PHP vanilla markdown Michelf's
Это функциональность Markdown Extra, которая включена в некоторые системы управления контентом (например, Drupal), но сама по себе не включена в Markdown.
Еще чище было бы просто поместить p#given img { float: right } в таблицу стилей или в <head> и заключить в теги style. Тогда просто используйте уценку .
Встраивание CSS - это плохо:
CSS в другом файле:
img[alt=Flowers] { float: right; }
Какие? Теперь вдруг вам нужно редактировать внешний файл каждый раз, когда вы меняете содержимое уценки? Мне это не кажется хорошим решением.
@JordanReiter Каждый здесь написал программу, состоящую из более чем одного файла, в которой логика распределена / организована во многих местах. Мы делаем это специально для удобства обслуживания. Почему это так болезненно и ужасно иначе?
Markdown позволяет пользователям, не являющимся программистами, создавать контент, и он не должен зависеть от файлов, к которым требуется прямой доступ и редактирование на сервере. Другой пример: я считаю совершенно нормальным жестко закодировать имена полей в базе данных в свой код, но ошибочно жестко запрограммировать ценить поля в вашей базе данных (например, if product.name == 'Tulips'), потому что вы не можете полагаться на стабильность стоимости. Все, что нужно, - это заменить Flowers на Flower, и внезапно это изображение выскочит из поля зрения. Кроме того, они должны звонить вам каждый раз, когда добавляют изображение!
Спасибо, мне это очень пригодилось. Принятое решение, похоже, не работает на сайте, размещенном на github на основе Jekyll. Я установил для alt-текста значение «floatright», так как мне все равно, что такое alttext, это хороший способ легко контролировать размещение моего изображения в разметке.
@cboettig Это серьезное злоупотребление тегом alt. Предполагается, что это текстовое описание изображения для людей, которые его не видят.
@nathang Да, я полностью согласен. Но, учитывая, что в наши дни очень немногие люди беспокоятся о том, чтобы включать альтернативный текст (например, примеры в этом списке), я думаю, что наличие alttext, которое сообщает вам, что есть изображение с плавающей запятой, не намного хуже, чем отсутствие alttext, и я даю WTP'- реквизиты для творчества здесь . Таким образом, уценка остается действительной.
Я поражен тем, как много людей оплакивают это решение. Это красивый хак, необходимый для решения проблемы с некоторыми услугами хостинга. Плакат, который дал этот красивый хак, исчез, и вместо этого в сообществе остались плаксы.
Для тех, кто помешан на этом, используйте ![My incredibly useful alt text -right] и img[alt$ = "-right"] { float: right }. Таким образом, вы получите на 100% совместимый Markdown, HTML, XHTML5 с отключенными функциями и бог знает что.
Кристоф: Пожалуйста, прочтите комментарий Натана Григга, чтобы понять, почему это плохая идея. Вы смешиваете отображаемую информацию с вашими данными, что плохо, но вы также делаете это таким образом, чтобы на самом деле они были видны пользователям, которые наводят курсор мыши или используют текстовые браузеры.
Если вам нравится это решение, посмотрите мою альтернативу с использованием другого метода, который не использует атрибут ALT и вместо этого использует #hash для изображения src.
Самый простой - обернуть изображение центральным тегом, например, так ...
<center></center>
Все, что связано с Markdown, можно протестировать здесь - http://daringfireball.net/projects/markdown/dingus
Конечно, <center> может быть устаревшим, но это просто и работает!
Просто заметил, что OP запросил правильное выравнивание - я пытался центрировать изображение, когда наткнулся на этот ответ.
Я собираюсь встать на сторону @ yoyo - <center> действительно имеет смысл. Он устарел из HTML, потому что HTML должен описывать только контент; стили должны быть в таблицах стилей. Однако у Markdown другое намерение: включить стиль, необходимый для передачи текстового сообщения, а все остальное оставить на усмотрение модуля визуализации / сайта. <center> кажется намного более естественным, чем размышления о CSS width, float, margin… - Я бы даже пошел дальше, если бы анализатор Markdown заменил теги <center> соответствующими элементами, поддерживаемыми CSS, подобно тому, как он в настоящее время интеллектуально определяет абзацы.
Мне нравится быть очень ленивым, используя таблицы для выравнивания изображений с синтаксисом вертикальной черты (|). Это поддерживается некоторыми разновидностями Markdown (а также поддерживается Текстиль, если это помогает вашей лодке):
| I am text to the left |  |
или же
|  | I am text to the right |
Это не самое гибкое решение, но оно подходит для большинства моих простых потребностей, легко читается в формате разметки, и вам не нужно запоминать какой-либо CSS или необработанный HTML.
Мне нравится этот стиль, очень уцененный. Жаль, что это не работает на github (по крайней мере, пока.)
Я только что попробовал этот синтаксис на GitHub, и теперь он работает.
Это интересный прием, но он неправильно использует таблицы для разметки. Добро пожаловать в 1999 год.
Для уценки со вкусом github добавьте строку с |-|-|. Он сообщает синтаксическому анализатору, что есть таблица, а первая строка - это заголовок. Пример: goo.gl/xUCRiK
Многие «лишние» процессоры Markdown поддерживают атрибуты. Таким образом, вы можете включить такое имя класса (PHP Markdown Extra):
{.callout}
или, альтернативно (Маруку, Kramdown, Уценка Python):
{: .callout}
Тогда, конечно, вы можете правильно использовать таблицу стилей:
.callout {
float: right;
}
Если ваш поддерживает этот синтаксис, он дает вам лучшее из обоих миров: нет встроенной разметки и достаточно абстрактной таблицы стилей, чтобы ее не нужно было изменять вашим редактором содержимого.
К тому времени, когда вы напишете все это:! Цветы {: .callout}, вы, возможно, уже написали <img src = "/ flowers.jpeg" class = "callout" />
Я согласен, но Markdown часто выбирают для пользователей, не владеющих * ML, поэтому нет причин предпочитать HTML любому другому произвольному синтаксису.
(«Нет причин», конечно, слишком упрощает. Есть много причин, по которым вы можете захотеть, чтобы ваши редакторы приблизились или отдалились от окончательного HTML-рендеринга. Или вы можете не захотеть вводить HTML-зависимость в свой контент, если вы выбрал Markdown, чтобы абстрагироваться от техники рендеринга.)
Как и greg сказал, вы можете встраивать HTML-контент в Markdown, но одна из особенностей Markdown - избежать необходимости иметь обширные (или какие-либо, если на то пошло) знания о разметке CSS / HTML, верно? Это то, что я делаю:
В моем файле Markdown я просто приказываю всем своим редакторам вики вставлять обтекание всех изображений чем-то вроде этого:
'<div> // Put image here </div>`
(конечно .. они не знают, что означает <div>, но это не имеет значения)
Итак, файл Markdown выглядит так:
<div>
![optional image description][1]
</div>
[1]: /image/path
А в содержимом CSS, которое охватывает всю страницу, я могу делать все, что захочу, с тегом изображения:
img {
float: right;
}
Конечно, вы можете сделать больше с содержимым CSS ... (в этом конкретном случае упаковка тега img с помощью div предотвращает перенос другого текста на изображение ... это всего лишь пример), но IMHO суть Уценка заключается в том, что вы не хотите, чтобы потенциально нетехнические люди углублялись в тонкости CSS / HTML ... вам, как веб-разработчику, нужно сделать свой CSS-контент, который обертывает страницу как можно более универсальным и чистым, но опять же, вашим редакторам не нужно об этом знать.
Если вы реализуете его на Python, есть расширение, который позволяет добавлять пары ключ / значение HTML и метки класса / идентификатора. Синтаксис для этого:
{: style = "float:right"}
Или, если встроенный стиль не позволяет вашей лодке плавать,
{: .floatright}
с соответствующей таблицей стилей stylish.css:
.floatright {
float: right;
/* etc. */
}
Мне понравился ответ learnvst использования таблиц, потому что он вполне читается (что является одной из целей написания Markdown).
Однако в случае парсера GitBook Markdown мне пришлось, помимо пустой строки заголовка, добавить под ним разделительную строку, чтобы таблица была распознана и правильно отрисована:
| - | - |
|---|---|
| I am text to the left |  |
|  | I am text to the right |
Строки-разделители должны включать не менее трех тире ---.
Я нашел хорошее решение в чистый Markdown с небольшим CSS 3 взлом :-)
Следуйте плавающему изображению кода 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;
}
У меня есть альтернатива вышеперечисленным методам, которые использовали тег ALT и селектор CSS в теге alt ... Вместо этого добавьте хеш URL-адреса следующим образом:
Сначала ваш код изображения Markdown:
Обратите внимание на добавленный хэш URL #center.
Теперь добавьте это правило в CSS с помощью селекторов атрибутов CSS 3 для выбора изображений с определенным путем.
img[src*='#left'] {
float: left;
}
img[src*='#right'] {
float: right;
}
img[src*='#center'] {
display: block;
margin: auto;
}
Вы должны иметь возможность использовать хэш URL, подобный этому, почти как определение имени класса, и это не является неправильным использованием тега ALT, как некоторые люди прокомментировали это решение. Также не потребуются дополнительные расширения. Сделайте то же самое для смещения вправо и влево или любых других стилей, которые вам могут понадобиться.
Именно то, что я искал. Вы спаситель жизни. Я хотел бы добавить одну вещь: `` h1 h2 {clear: both} ``, чтобы следующий заголовок начинался с новой строки (не перекрывался с изображением)
похоже на то, что я ищу, но ... как мне сделать CSS? и как мне это назвать в Markdown?
это тоже отличное решение, такое же, как у меня :)
@OzzyCzech - нет, на самом деле, ваше решение неправильно использует тег изображения "alt", что может быть плохим для соответствия доступности на странице, где это решение использует подход без вторжения через тег src.
Спасибо, но как я могу переместить все изображения в центр (используя один файл CSS)?
Спасибо, есть ли способ выровнять изображения все по центру с помощью CSS?
У меня была та же задача, и я выровнял свои изображения по правому краю, добавив следующее:
<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.
эта работа для меня
<p align = "center">
<img src = "/LogoOfficial.png" width = "300" >
</p>
Обратите внимание, что в зависимости от платформы вы можете добавлять фильтры для уценки. Так что можно будет добавить синтаксис, определяющий выравнивание.