降价和图像对齐

189

我正在制作一个网站，每月发布有关问题的文章。这很简单，我认为使用Markdown编辑器（例如WMD Stack Overflow中）将是完美的。

但是，他们确实需要能够使图像在给定的段落中正确对齐。

我看不到使用当前系统执行此操作的方法-可以吗？

html css markdown

— 耶迪贾
source

2

为什么不问“我正在通过一个非营利性网站来帮助一个朋友，该站点每月发表一些问题”而不问问题？

— JGallardo 2014年

11

@JGallardo因为我想弄清楚我没有完全控制系统，也没有能力购买任何类型的解决方案。我同意我可以用不同的措词来表达这个问题。

— Jedidja 2014年

1

关于降价编辑器，您可以使用出色的stackedit.io/editor#，它非常棒：)

— AbdelHady 2015年

1

@AbdelHady（如果仅在2008年可用的话：）

— Jedidja

1

@iPython如何将2008年的问题复制为4年后（2012年）提出的问题？

— Jedidja

193

您可以在Markdown中嵌入HTML，因此您可以执行以下操作：

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

Continue markdown text...

— 格雷格·休吉尔
source

42

清理并通过不必要的strippnig进行标准化，div并img分别在标签上添加一个斜杠，即`<img style =“ float：right” src =“ whatever.jpg” />

— ma11hew28

而不是div我更喜欢使用span内联缩进。对于整个段落，居中div是好的，甚至很简单p。

— Eye

21

与某些经过消毒的解释器（例如GitHub的解释器）一起使用时，效果更好：<img align =“ right” src =“ whatever.jpg” />

— 受益

19

@MattDiPasquale不需要使用斜杠。那是XHTML，不是HTML。

— CaptSaltyJack

我试图以此将图像嵌入到鬼博客中；使用<div style =“ float：right”> <img ...> </ div>将以下段落正确地绕过图像，而<img style =“ float：right” ...>则将段落和图像在并排的盒子里。

— Martin DeMello

57

我在纯Markdown中找到了一个不错的解决方案，并带有一些CSS 3技巧 :-)

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

当image alt结尾为<或时，请遵循左侧或右侧的CSS 3代码浮动图片>。

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

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

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

— 奥齐·捷克
source

CSS应该放在MkDocs目录的什么位置？@YannDuran

— Ivan Huang

1

@IvanHuang只需确保您根据MkDocs文档添加了extra.css文件，并将css放入该文件中。

— 扬·杜兰

54

许多Markdown“额外”处理器都支持属性。因此，您可以像这样包含一个类名（PHP Markdown Extra）：

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

或者，（Maruku，Kramdown，Python Markdown）：

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

然后，当然，您可以以正确的方式使用样式表：

.callout {
    float: right;
}

如果您的语法支持此语法，则可以为您提供两全其美的优势：没有嵌入式标记，并且样式表的抽象程度足以无需内容编辑器进行修改。

— 格维茨
source

在编写所有这些内容时：！Flowers {：.callout}您可能还写了<img src =“ / flowers.jpeg” class =“ callout” />

— lfalin 2014年

1

我同意，但是Markdown通常是为非* ML语言的用户选择的，因此没有理由比其他任意语法更喜欢HTML。

— 格维兹（Gerwitz）

4

（“无理由”当然过于简化了。有很多UX原因，您可能希望编辑者离最终HTML渲染更近或更远。或者，如果您愿意，则不愿在内容中引入HTML依赖关系。选择Markdown来抽象渲染技术。）

— 格维兹（Gerwitz

33

对于上面使用ALT标签和alt标签上的CSS选择器的方法，我可以选择一种替代方法，而是添加如下所示的URL哈希：

首先，您的Markdown图片代码：

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

注意添加的URL哈希#center。

现在，使用CSS 3属性选择器在CSS中添加此规则，以选择具有特定路径的图像。

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

您应该能够像定义类名一样使用这样的URL哈希，这并不是像某些人对此解决方案评论的那样滥用ALT标签。它还不需要任何其他扩展。为左右浮动或您可能需要的任何其他样式执行一个。

— 震颤
source

1

正是我想要的。你是救生员。我想添加的一件事是```h1 h2 {clear：both}```，以便下一个标题以新行开始（不与图像重叠）

— bhar1red

看起来像我要找的东西，但是...我该如何制作CSS？以及如何在Markdown中称呼它？

— Tony D

这也是与我相同的解决方案:)

— OzzyCzech '19

3

@OzzyCzech-并非完全不是，您的解决方案滥用了图像“ alt”标签，这可能不利于页面上的可访问性，其中该解决方案通过src标签使用了非入侵方法。

— 震颤

24

嵌入CSS是不好的：

![Flowers](/flowers.jpeg)

CSS在另一个文件中：

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

67

什么？现在突然之间，每次更改降价内容时，您都必须编辑一个外部文件吗？听起来对我来说不是一个好的解决方案。

— Jordan Reiter

9

@JordanReiter这里的每个人都编写了一个程序，其中包含多个文件，其中逻辑分布/组织在许多位置。我们出于维护目的故意这样做。为什么这是如此痛苦和可怕？

— z5h 2012年

8

Markdown允许非程序员用户创建内容，并且内容不应该依赖必须在服务器上直接访问和编辑的文件。另一个例子：我认为将数据库中的字段名称硬编码到代码中是完全正常的，但是基于数据库中字段的值（即if product.name == 'Tulips'）硬编码是错误的，因为您不能依赖于价值的稳定性。它所要做的就是某人更改Flowers为Flower图像，然后突然弹出看不见的图像。此外，他们每次添加图片时都必须给您打电话！

— Jordan Reiter 2012年

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 |

它不是最灵活的解决方案，但是可以满足我的大多数简单需求，易于以markdown格式阅读，并且您无需记住任何CSS或原始HTML。

— 学习
source

2

我喜欢这种风格，非常优惠。太糟糕了，它无法在github上运行（无论如何还没有。）

— 艾略特（Eliot

3

我刚刚在GitHub上尝试了这种语法，它现在似乎可以工作。

— Ege Rubak 2014年

6

这是一个有趣的技巧，但是它在滥用表格的布局。欢迎来到

— 1999。– jxpx777

3

对于github风格的markdown，用添加一行|-|-|。它告诉解析器有一个表，第一行是标题。例如：goo.gl/xUCRiK

— Kayla

10

甚至更干净的方法是将其放在p#given img { float: right }样式表中，或放在<head>并包装在style标签中。然后，只需使用markdown即可![Alt text](/path/to/img.jpg)。

— ma11hew28
source

8

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

markdownMarkdown内部的属性可能性。

— 彼得·莫滕森
source

1

为我工作。我没有使用github。谢谢@raphox。

— 雨果·塔瓦雷斯

与michelf的香草降价PHP解析器配合使用时效果很好

— Ronan

2

这是Markdown Extra功能，它包含在某些内容管理系统（例如Drupal）中，但本身不包含在Markdown中。

— 蒂姆（Tim）

7

我喜欢learnvst的回答使用表，因为它很易读（这是编写Markdown的目的之一）。

但是，对于GitBook的Markdown解析器，我必须在表头下方添加一个分隔线，以识别并正确呈现该表：

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

分隔线必须至少包含三个破折号---。

— 伊卡里托
source

7

如果用Python实现，则有一个扩展，可让您添加HTML键/值对和类/ 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. */
}

— 詹姆
source

2

正如greg 所说的，您可以将HTML内容嵌入Markdown中，但是Markdown的要点之一是避免必须具有广泛的CSS / HTML标记知识（或其他知识），对吗？这是我的工作：

在我的Markdown文件中，我只是指示所有Wiki编辑器嵌入包装所有图像的内容，如下所示：

'<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的内容。.作为Web开发人员，由您决定使CSS内容尽可能平整而干净地包装页面，然后由您决定同样，您的编辑也不需要知道这些。

— 阿卜杜
source

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">

— 祖哈·卡里姆（Zuha Karim）
source

我试过了，但它现在正在工作..图像已对齐，但显示了html文本。

— fiza khan

-1

这项工作对我来说

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

— 安德森·弗洛菲略
source

-16

最简单的方法是将图像包装在中心标签中，就像这样...

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

与Markdown有关的任何内容都可以在此处进行测试-http: //daringfireball.net/projects/markdown/dingus

当然，<center>可能不赞成使用，但是它很简单并且有效！

— 悠悠球
source

1

只是注意到OP要求正确对齐-当我偶然发现此答案时，我正试图将图像居中。

— yoyo

14

不，永远不要使用center。

— Jordan Reiter 2012年

12

我实际上要与@yoyo站在一起- <center>确实有意义。它不推荐使用HTML，因为HTML仅应描述内容。样式应该在样式表中。但是，Markdown的意图不同：包含足够的样式以传达文本消息，而其余的则留给渲染器/站点。<center>似乎比考虑CSS width，floats，margins 更自然……–我什至可以让Markdown解析器<center>用适当的CSS支持的元素替换标签，就像它目前如何智能地计算段落一样。

— Slipp D. Thompson 2012年