Markdown和图像对齐

Question

Markdown和图像对齐

htmlcssmarkdown

264

我正在制作一个每月发布文章的网站。它很简单，我认为使用Markdown编辑器（比如Stack Overflow中的WMD）会非常完美。

然而，他们需要在给定段落中将图像右对齐的功能。

我无法使用当前系统实现这一功能 - 这可能吗？

- jedidja

4

为什么不直接问问题，而不用陈述“我在帮助一个非营利网站，每个月发布有关某些问题的文章”？ - JGallardo

17

@JGallardo 因为我希望清楚表明我无法完全控制系统，也没有购买任何类型的解决方案的能力。我同意我本可以用不同的措辞来提问。 - Jedidja

4

关于 Markdown 编辑器，你可以使用非常棒的 https://stackedit.io/editor# ，在它上面写作非常棒 :) - AbdelHady

2

@AbdelHady 如果它在2008年就已经可用了 :) - Jedidja

4

@iPython 如何把一个在2008年提出的问题标记为一个在4年后（2012年）提出的重复问题？ - Jedidja

显示剩余3条评论

20个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- abbood · Answer 1

正如 Greg 所说，你可以在 Markdown 中嵌入 HTML 内容，但是 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内容方面做更多的事情...（在这种情况下，用div包装img标签可以防止其他文本与图像重叠...这只是一个例子），但我认为Markdown的重点是不希望潜在的非技术人员了解CSS / HTML的细节...作为Web开发人员，你需要尽可能地使包装页面的CSS内容通用和清洁，但是你的编辑不需要知道这些。

- Zuha Karim · Answer 2

我有同样的任务，通过添加以下内容使我的图片右对齐：

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

- Chetan B B · Answer 3

您可以直接使用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">

- Nikhil Dash · Answer 4

![Alt Text](image URL){ align=right }

查看这个Markdown图像样式的终极指南，了解更多点击这里。

- N. Joppi · Answer 5

最佳且可定制的选项：

<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个图像的情况。

- Bill Hoag · Answer 6

如果您只是想简单地将图像缩进一点，只需在 img 元素中使用一些不间断空格即可。例如：     <img src="https://user-images.githubusercontent.com/123456/123456789-3aabedfe-deab-4242-97a0-a6641e675e68.png" />

- rahul-ahuja · Answer 7

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

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

输出：

- dopexxx · Answer 8

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

<img align="right" src=/logo.png" alt="logo" width="100"/>

- Andersonfrfilho · Answer 9

这对我有效

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

- yoyo · Answer 10

最简单的方法是将图像包装在中心标签中，如下所示...

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

这里可以测试与Markdown相关的任何内容 - http://daringfireball.net/projects/markdown/dingus

当然，<center>可能已经过时了，但它很简单并且有效！