74

我有一个窄长的图像，我想在 GitHub 上的 README.md 文件的右上角显示。我一直在尝试几件事来让它正确对齐，目前有

<p align="right">
  <img src="doc/subpagelist.png" />
</p>

这样做的原因是图像在右侧对齐，但相当无用，因为 Markdown 文件中图像下方的所有内容都显示在图像的底部下方，而不是显示在图像的左侧。

有没有办法让文本在图像周围流动（不去掉标题和段落）？

4

5 回答 5

110

The align="right" (or left) attribute works in GitHub Markdown:

<img align="right" src="doc/subpagelist.png">
于 2014-05-03T17:29:14.683 回答
8

它适用于我（仅适用于 jekyll，不适用于 Github 降价）：将下面的代码放在您的内容降价中（我已将其放在第一行以便更好地组织）


    <style type="text/css">
    .image-left {
      display: block;
      margin-left: auto;
      margin-right: auto;
      float: right;
    }
    </style>

并参考您的图像如下： [![Proguard](./proguard-snippets.png)](http://www.thiengo.com.br/proguard-android){: .image-left } Your Text comes here...

请注意图像 url 之外的.image-left类。

最终结果在这里：年度电影 jekyll github 页面

于 2017-04-24T02:41:01.267 回答
6

在 markdown 中，您可以为标签添加额外的属性。例如，我将其用于您打算做的事情：

![Some Title](http://placehold.it/image.jpeg){:style="float: right;margin-right: 7px;margin-top: 7px;"}
于 2016-01-21T20:37:44.260 回答
4

align="left"工作正常。要再次打破对齐，请使用<br clear="left"/>（或<br clear="right"/>）标签：

<img src="/path/to/image.png" align="left" width="200px"/>
some text floating around the image

<br clear="left"/>

A "newline". This text doesn't float anymore, is left-aligned.
于 2021-05-19T16:33:43.910 回答
-1

您所描述的是图像的“浮动”，它允许文本在其周围流动。如果您想了解有关此主题的更多信息，有许多关于浮动在 CSS中的好 教程。同时，要让图像在 Markdown 中浮动，您可以将图像包装在 div 中并使用以下命令浮动该 div：

<div style="float: right">
    ![Replace this with your image](http://placehold.it/85x85 "Title")
</div>
于 2013-10-01T12:00:33.013 回答