Code
2024-10-22 08:00:05

降价和图像对齐

我正在做一个网站，每月发表文章的问题。这很简单，我认为使用Markdown编辑器(如Stack Overflow中的WMD)将是完美的。

然而，他们确实需要在给定的段落中使图像右对齐的能力。

我看不出在目前的体制下有什么办法能做到这一点——有可能吗?

你可以在Markdown中嵌入HTML，所以你可以这样做:

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

Continue markdown text...
2008-10-31 22:47:23 
<div style="float:left;margin:0 10px 10px 0" markdown="1">
    ![book](/images/book01.jpg)
</div>

markdown内部的属性markdown可能性。

2009-08-04 15:18:46

更简洁的方法是将p#给定的img {float: right}放在样式表中，或者放在<head>中并包装在样式标签中。然后，只需使用markdown ![Alt text](/path/to/img.jpg)。

2010-11-14 15:08:03

嵌入CSS是不好的:

![Flowers](/flowers.jpeg)

CSS在另一个文件:

img[alt=Flowers] { float: right; }
2011-02-19 22:51:48

最简单的方法是用一个中心标签来包装图像，就像这样…

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

任何与Markdown有关的东西都可以在这里测试- http://daringfireball.net/projects/markdown/dingus

当然，<center>可能已弃用，但它很简单，而且可以工作!

2011-12-13 05:58:46

我喜欢超级懒地用垂直管道(|)语法使用表格来对齐图像。这是支持一些Markdown口味(也支持纺织，如果这浮动你的船):

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

or

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

这不是最灵活的解决方案，但它适合我的大多数简单需求，易于阅读的markdown格式，你不需要记住任何CSS或原始HTML。

2013-01-24 18:33:34

许多Markdown“额外”处理器支持属性。所以你可以像这样包含一个类名(PHP Markdown Extra):

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

或者，备用的(我的，Kramdown, Python Markdown):

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

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

.callout {
    float: right;
}

如果您的文档支持这种语法，那么它将为您提供两全其美的服务:没有嵌入标记，样式表足够抽象，无需内容编辑器修改。

2013-04-29 12:12:45

正如greg所说，你可以在Markdown中嵌入HTML内容，但Markdown的要点之一是避免必须有广泛的(或任何，就此而言)CSS/HTML标记知识，对吗?这就是我所做的:

在我的Markdown文件中，我简单地指示我所有的wiki编辑将所有图像嵌入包装，看起来像这样:

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

(当然. .他们不知道<div>意味着什么，但这并不重要)

所以Markdown文件看起来是这样的:

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

[1]: /image/path

在CSS内容包装整个页面，我可以做任何我想对图像标签:

img {
   float: right;
}

当然你可以用CSS内容做更多的事情…(在这种特殊情况下，用div包装img标签可以防止其他文本对图像进行包装……虽然这只是一个例子)，但IMHO Markdown的重点是你不希望潜在的非技术人员进入CSS/HTML的里里外外。这是由你作为一个web开发人员，使你的CSS内容包装的页面尽可能一般和干净，但你的编辑不需要知道这一点。

2013-05-04 09:43:27

如果你用Python实现它，有一个扩展可以让你添加HTML键/值对，以及类/id标签。它的语法是:

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

或者，如果嵌入式样式不能让你的船浮起来，

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

使用相应的样式表styles .css:

.floatright {
    float: right;
    /* etc. */
}
2013-09-27 00:36:46

我喜欢learnvst使用表格的答案，因为它是相当可读的(这是编写Markdown的一个目的)。

然而，在GitBook的Markdown解析器的情况下，除了一个空标题行，我还必须在它下面添加一个分隔行，以使表能够被识别并正确呈现:

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

分隔线至少需要包含三个破折号——。

2016-06-03 06:37:34

我发现了一个很好的解决方案在纯Markdown与一个小css3 hack:-)

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

当图像alt以<或>结束时，遵循css3代码浮动图像在左侧或右侧。

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

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

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

我有一个替代方法上面使用ALT标签和CSS选择器在ALT标签…相反，添加这样的URL散列:

首先你的Markdown图像代码:

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

注意添加的URL哈希#中心。

现在在CSS中添加这个规则，使用css3属性选择器来选择具有特定路径的图像。

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

您应该能够像定义类名一样使用URL散列，而不是像某些人评论的解决方案那样滥用ALT标记。它也不需要任何额外的扩展。为左右浮动也做一个，或者任何你想要的样式。

2017-04-29 03:22:42

我有同样的任务，我把我的图像向右对齐，添加了这个:

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

要将图像对齐到左侧或中心，请替换

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

with

<div style="text-align: center">
<div style="text-align: left">
2018-02-09 05:26:06

这对我很有用

<p align="center">
 <img src="/LogoOfficial.png" width="300" >
</p>
2020-05-20 19:07:41

在警告框内，将图像和文本作为单个块中的段落的一部分并排对齐。

<div class="warning" style='background-color:#EDF2F7; color:#1A2067; border-left: solid #718096 4px; border-radius: 4px;'>
<p style='padding:0.7em; margin-left:0.7em; display: inline-block;'>
<img src="typora_images/image-20211028083121348.png" style="zoom:70%;  float:right; padding:0.7em"/>
<b>isomorphism</b>  &rarr;  In mathematics, an isomorphism is a structure-preserving mapping between two structures of the same type that can be reversed by an inverse mapping.<br>
</p>
</div>

输出:

2021-10-28 03:23:52

我认为最简单的解决方案是直接指定align="right":

<img align="right" src=/logo.png" alt="logo" width="100"/>
2022-03-29 08:33:14

你可以直接使用align属性:

<img align="right" width="100" height="100" src="https://images.unsplash.com/photo-1650620109005-099c2de720f8?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHwxM3x8fGVufDB8fHx8&auto=format&fit=crop&w=500&q=60">

2022-04-23 16:50:43

最佳和最可定制的选项:

<div style="display:flex; align-items: center;"> <div style="flex:1"> <img src="https://www.researchgate.net/profile/Jinsong-Chong/publication/233165295/figure/fig5/AS:667635838640135@1536188196882/Initial-contour-Figure-9-Detection-result-in-low-resolution-image-in-low-resolution-image.ppm"/> </div> <div style="flex:1;padding-left:10px;"> <img src="https://www.researchgate.net/profile/Miguel-Vega-4/publication/228966464/figure/fig1/AS:669376512544781@1536603205341/a-Observed-low-resolution-multispectral-image-b-Panchromatic-image-c.ppm" /> </div> </div>

这将使第一个对齐到左边，第二个对齐到右边。也适用于2张以上的图像。

2022-08-18 06:03:37

为了使图像稍微缩进一点，只需在img元素中使用一些不间断的空格。例如:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<img src="https://user-images.githubusercontent.com/123456/123456789-3aabedfe-deab-4242-97a0-a6641e675e68.png" />

2022-09-14 18:41:04

推荐文章

aliyun

最新文章

标签

2024 code 京ICP备15047053号-1