一、背景
在开发中，经常使用到按钮作为一种输入部件，然而很多时候按钮又有不同的开发设计需求，本文重点分享：如何使用Qss来设置按钮的图标和按钮文本的位置，从而实现预期的开发效果。
【效果】
二、Css样式表
（2-1）常用的QPushButton样式表模板
1 QPushButton{
2 background-color: #2786ba; /* 背景颜色 */
3 border-radius:5px; /* 按钮边框的圆角设置 */
4
5 /* 按钮背景图标设置 */
6 background-image: url(:/configIcon.png); /* 背景图片 */
7 background-origin: content;
8 background-position: center; /* 背景图片的位置 */
9 padding-right: 40px; /* 背景图标的padding参数 */
10 padding-bottom: 2px; /* 背景图标的padding参数 */
11 background-repeat: no-repeat; /* 设置背景图像的平铺模式 */
12
13 /* 按钮文本设置 */
14 text-align: top; /* 文本的位置 */
15 padding-left: 2px; /* 文本的padding参数 */
16 padding-top: 2px;
17 font-size: 12px;
18 color: #FFFFFF; /* 文本颜色 */
19 }
（2-2）图标在上/文本在下
1 QPushButton#pushButton
2 {
3 background-image: url(:/configIcon.png);
4 background-origin: content;
5 background-position: top;
6 padding-top: 0px;
7 background-repeat: no-repeat;
8
9 text-align: bottom;
10 padding-bottom:-50px;
11 font-size: 12px;
12 color: #FFFFFF;
13 }
（2-3）图标在下/文本在上
1 QPushButton#pushButton_2
2 {
3 background-image: url(:/configIcon.png);
4 background-origin: content;
5 background-position: bottom;
6 background-repeat: no-repeat;
7
8 text-align: top;
9 padding-top:5px;
10
11 font-size: 12px;
12 color: #FFFFFF;
13 }
（2-4）图标在左/文本在右
1 QPushButton#pushButton_3
2 {
3 background-image: url(:/configIcon.png);
4 background-origin: content;
5 background-position: left;
6 background-repeat: no-repeat;
7
8 text-align: right;
9 padding-right:5px;
10
11 font-size: 12px;
12 color: #FFFFFF;
13 }
（2-5） 图标在右/文本在左
1 QPushButton#pushButton_4
2 {
3 background-image: url(:/configIcon.png);
4 background-origin: content;
5 background-position: right;
6 background-repeat: no-repeat;
7
8 text-align: left;
9 padding-left:5px;
10
11 font-size: 12px;
12 color: #FFFFFF;
13 }
三、特别说明
1、在设置QPushButtom的图标和文本位置时有两个Css属性特别重要：
1 background-position ----- 设置图标的位置
2 text-align-------------设置文本的位置
2、然后使用Padding盒子模型进行位置设置了：
1 padding-left
2 padding-bottom
3 padding-top
4 padding-right
注意：以上四个padding参数一定要设置合适，才能调整图标和文本的位置。
