我正在制作一个每月发布文章的网站。它很简单,我认为使用Markdown编辑器(比如Stack Overflow中的WMD)会非常完美。
然而,他们需要在给定段落中将图像右对齐的功能。
我无法使用当前系统实现这一功能 - 这可能吗?
我正在制作一个每月发布文章的网站。它很简单,我认为使用Markdown编辑器(比如Stack Overflow中的WMD)会非常完美。
然而,他们需要在给定段落中将图像右对齐的功能。
我无法使用当前系统实现这一功能 - 这可能吗?
正如 Greg 所说,你可以在 Markdown 中嵌入 HTML 内容,但是 Markdown 的一个重点是避免必须具备广泛的(或者任何)CSS/HTML 标记知识,不是吗?这就是我做的:
在我的 Markdown 文件中,我简单地指示所有维基编辑员将所有图像包装起来,看起来像这样:
'<div> // Put image here </div>`
当然..他们不知道<div>
的含义,但这并不重要。
因此,Markdown文件看起来像这样:
<div>
![optional image description][1]
</div>
[1]: /image/path
img {
float: right;
}
我有同样的任务,通过添加以下内容使我的图片右对齐:
<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">
<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">
最佳且可定制的选项:
<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个图像的情况。
如果您只是想简单地将图像缩进一点,只需在 img
元素中使用一些不间断空格即可。例如: <img src="https://user-images.githubusercontent.com/123456/123456789-3aabedfe-deab-4242-97a0-a6641e675e68.png" />
将图像和文本对齐,作为段落的一部分,在警告框内单个块中。
<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> → 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>
输出:
align="right"
:<img align="right" src=/logo.png" alt="logo" width="100"/>
这对我有效
<p align="center">
<img src="/LogoOfficial.png" width="300" >
</p>
<center>![Alt test](http://upload.wikimedia.org/wikipedia/en/b/bc/Wiki.png)</center>
这里可以测试与Markdown相关的任何内容 - http://daringfireball.net/projects/markdown/dingus
当然,<center>
可能已经过时了,但它很简单并且有效!
<center>
是有道理的。它已经从 HTML 中弃用,因为 HTML 应该仅描述内容;样式应该在样式表中。但是,Markdown 有一个不同的目的:包含足够的样式以传达文本信息,并将其余部分留给渲染器/网站。在 Markdown 中,<center>
看起来比考虑 CSS 的 width
、float
和 margin
更自然......我甚至会让 Markdown 解析器替换 <center>
标签为适当的基于 CSS 的元素,就像它当前如何智能地确定段落一样。 - Slipp D. Thompson