CSDN图片居中、左对齐、右对齐、大小设置

写在前面

  在撰写CSDN博文时,经常需要在博客中插入图片对文字部分进行加以解释或者插入仿真结果,而插入到CSDN中的图片是一个链接的形式,如下所示。

![在这里插入图片描述](https://img-blog.csdnimg.cn/e668760c93ab4dc3aad04981fde0a4ab.jpeg)

在这里插入图片描述
  为了博文的排版,有时需要调整图片大小或者图片的位置。

一、图片位置调整

  在插入图片时,默认情况是左对齐的,如下图所示。那么,有时需要对图片的位置进行调整:居中左对齐右对齐

在这里插入图片描述

1.1 图片居中

方法一

  方法一的图片居中语法如下,在图片链接后加上语句#pic_center。

(图片链接#pic_center)

例子:

![在这里插入图片描述](https://img-blog.csdnimg.cn/99dc1072e8f1471990b700e1c85d301a.jpeg#pic_center)

效果:

在这里插入图片描述

方法二

  方法二的居中语法如下所示:

<div align=center><img  src="图片链接"/></div>

例子:

<div align=center><img  src="https://i-blog.csdnimg.cn/blog_migrate/c101988b0161ab801713408887f89f86.jpeg"/></div>

效果:

1.2 图片左对齐

  图片左对齐与图片居中的方法一样,都有两种,只需将居中center改为左对齐left即可。

方法一

(图片链接#pic_left)

例子:

![在这里插入图片描述](https://img-blog.csdnimg.cn/99dc1072e8f1471990b700e1c85d301a.jpeg#pic_left)

效果:

在这里插入图片描述

方法二

<div align=left><img  src="图片链接"/></div>

例子:

<div align=left><img  src="https://i-blog.csdnimg.cn/blog_migrate/c101988b0161ab801713408887f89f86.jpeg"/></div>

效果:

1.3 图片右对齐

  同样,图片右对齐只需将居中center改为左对齐right即可,语法如下:

方法一

(图片链接#pic_right)

例子:

![在这里插入图片描述](https://img-blog.csdnimg.cn/99dc1072e8f1471990b700e1c85d301a.jpeg#pic_right)

效果:

在这里插入图片描述

方法二

<div align=right><img  src="图片链接"/></div>

例子:

<div align=right><img  src="https://i-blog.csdnimg.cn/blog_migrate/c101988b0161ab801713408887f89f86.jpeg"/></div>

效果:

二、图片大小调整

  对图片的大小进行调整,这里有两种方法。

方法一

  方法一控制图片的语法格式如下,在图片链接后面加上等于号=,在加上图片的长和宽的像素或者是比例,如果填入的是比例,则根据比例进行等比缩放,如果填的是长和宽的像素,则图片会根据所设长宽像素进行改变,不是等比缩放。

(图片链接=长x宽)
(图片链接=比例x)

例子:

# 原图
![在这里插入图片描述](https://img-blog.csdnimg.cn/99dc1072e8f1471990b700e1c85d301a.jpeg#pic_center)

# 长400200
![在这里插入图片描述](https://img-blog.csdnimg.cn/99dc1072e8f1471990b700e1c85d301a.jpeg#pic_center=400x150)

# 等比缩放至原来的30%
![在这里插入图片描述](https://img-blog.csdnimg.cn/99dc1072e8f1471990b700e1c85d301a.jpeg#pic_center=30%x)

效果:

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

方法二

  方法二设置图片等比例缩放的语法如下,在图片链接位置填入图片链接,在缩放百分比位置填入缩放的百分比,将图片调整至原图的百分比。值得注意的是,方法二只能进行等比缩放。

<img src="图片链接" width="缩放百分比">

例子:

# 原图
![在这里插入图片描述](https://img-blog.csdnimg.cn/99dc1072e8f1471990b700e1c85d301a.jpeg#pic_center)

# 缩放至原图的30%
<img src="https://i-blog.csdnimg.cn/blog_migrate/c101988b0161ab801713408887f89f86.jpeg#pic_center" width="30%">

效果:
在这里插入图片描述

写在后面

  好了,以上就是关于CSDN博客撰写过程中常用的图片修改语法,欢迎评论区友好交流批评指正!!!

在这里插入图片描述

  • 9
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 8
    评论
要实现QwtText上下居中且左对齐的效果,可以使用以下方法: 1. 使用QVBoxLayout和QHBoxLayout布局管理器来实现上下居中和左对齐的效果。首先,创建一个QWidget作为容器,并设置其布局为QVBoxLayout。然后,创建一个QLabel作为文本的容器,并设置其布局为QHBoxLayout。将QLabel添加到QWidget中,并设置QLabel的文本内容和对齐方式为左对齐。 2. 使用QGridLayout布局管理器来实现上下居中和左对齐的效果。首先,创建一个QWidget作为容器,并设置其布局为QGridLayout。然后,创建一个QLabel作为文本的容器,并将其添加到QGridLayout中的指定位置。设置QLabel的文本内容和对齐方式为左对齐。 无论使用哪种方法,都可以通过设置QWidget的大小和对齐方式来调整文本的位置和对齐方式。例如,可以使用QWidget的setFixedSize方法设置固定大小,并使用setAlignment方法设置对齐方式。 请注意,以上方法是基于Qt框架的实现方式,具体的代码实现可能会有所不同,具体取决于您使用的编程语言和框架。 #### 引用[.reference_title] - *1* [css如何实现两行文字居中左对齐](https://blog.csdn.net/weixin_43062742/article/details/109492052)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item] - *2* *3* [flex布局详细介绍以及盒子上下左右居中对齐实例](https://blog.csdn.net/m0_52743009/article/details/127101947)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]
评论 8
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值