简单学会如何让图片居中、居左、居右

之前,一直想写一个关于图片布局的帖子,但是因为steemit对html支持不够,不是很成功。但是在HF19(第十九次版本更新)之后,开始支持部分html标签了。比如说之前是不支持的,其效果是:看到下划线了吗?

那么下面就详细说下怎么样对图片进行排版处理。

居中

使用< center >……< / center > 标签,例如

  • 所见即所得模式下,点击raw HTML ,可以使用< center >imglink< / center >或者< center >< img src="imglink"/ >< / center >
  • markdown模式下,使用< center >![imgname](imglink)< / center >

居右

将div 代码插入到你想要居左的文字后面,一般是在 p 段落开始符号前面. 代码格式如下:
< div class="pull-right"> < img src="imglink" />< /div >
文字就写在代码后面就行了!





居左

将< div >代码插入到你想要居左的文字后面,一般是在< p >段落开始符号前面. 代码格式如下:
< div class="pull-left">< img src="imglink" />< /div >
文字就写在代码后面就行了!





PS:

1.如果文字比较少进行,居左居右处理会影响到下面的内容,需要在文字后面多添加几行
,使他可以配合图片的高度;

2,先编辑好内容再编辑样式,来回切换代码模式和编辑模式会使样式丢失。





--------------关于“谷哥点名”----------

  @mrpointp @mrspointm @fundurian @dixonloveart @coldhair @larus @justyy @wilkinshui @htliao  @syh7758520  @kitcat  @catwomanteresa @tvb @kenchung  @superhardness

以上 参与并已经发布post,第一期结束时间为8月9日,赶紧参与!

---------------------------------------------

感谢诸位阅读@jubi的文章,如果可以的话,希望得到您的follow,upvote,最重要的是reply! 

H2
H3
H4
3 columns
2 columns
1 column
13 Comments