利用QSS自由控制QPushButton中图片和文字的位置

在用QPushButton的qss的时候，发现其实可以手动控制图片和文字的位置，而不用再在paintEvent里去画图片和文字，从而控制其位置。

看看效果：

一、控制QPushButton中图片位置

效果：

首先我们看利用qss如何控制图片位置

QPushButton {
    background-color: #60C171;
    background-image: url(:/images/home_small.png);
    background-origin: content;
    background-position: top;
    padding-top: 2px;
    background-repeat: no-repeat;
}

其中最重要的一个是 background-origin: content; 这个是相对内容进行定位，具体可以参考关于CSS3 background-origin属性

background-position: top;

这里的background-position的值可以是一个值，比如left top right bottom center中的一个，也可以是两者的组合，比如left top，right bottom等，具体大家试一下效果，就知道了。

QPushButton中的图片位置，关键点为：

background-origin: content;
/*下面两个属性控制图片的对齐方式和间距*/
background-position: top;
padding-top: 2px;

/*或者通过水平和垂直对齐方式来控制*/
background-position: left bottom;
padding-left: 2px;
padding-bottom: 2px;

通过水平和垂直对齐方式，以及padding的值，就能很好的控制QPushButton中图片的位置。

qss为：

QPushButton#pushButton_1 {
    background-color: #60C171;
    background-image: url(:/images/home_small.png);
    background-origin: content;
    background-position: top;
    padding-top: 2px;
    background-repeat: no-repeat;
}

QPushButton#pushButton_2 {
    background-color: #60C171;
    background-image: url(:/images/home_small.png);
    background-origin: content;
    background-position: left;
    padding-left: 2px;
    background-repeat: no-repeat;
}

QPushButton#pushButton_3 {
    background-color: #60C171;
    background-image: url(:/images/home_small.png);
    background-origin: content;
    background-position: left bottom;
    padding-left: 2px;
    padding-bottom: 2px;
    background-repeat: no-repeat;
}

QPushButton#pushButton_4 {
    background-color: #60C171;
    background-image: url(:/images/home_small.png);
    background-origin: content;
    background-position: right top;
    padding-right: 2px;
    padding-top: 2px;
    background-repeat: no-repeat;
}

二、QPushButton中文字位置

效果图：

QPushButton#pushButton_5 {
    background-color: #60C171;
    text-align: top;
    padding-top: 8px;
    font-size: 12px;
    color: #FFFFFF;
}

QPushButton#pushButton_6 {
    background-color: #60C171;
    text-align: left;
    padding-left: 8px;
    font-size: 12px;
    color: #FFFFFF;
}

QPushButton#pushButton_7 {
    background-color: #60C171;
    text-align: left top;
    padding-left: 2px;
	padding-top: 2px;
    font-size: 12px;
    color: #FFFFFF;
}

QPushButton#pushButton_8 {
    background-color: #60C171;
    text-align: right bottom;
    padding-right: 2px;
	padding-bottom: 2px;
    font-size: 12px;
    color: #FFFFFF;
}

同样的 text-align: right bottom; 也支持水平和垂直两个值，也可以 text-align: right;

三、同时控制QPushButton的图片和文字位置

就是将控制QPushButton中的图片和文字方式进行任意组合

目前就列举了几种情况：

QPushButton#pushButton_9 {
    background-color: #60C171;
    background-image: url(:/images/home_small.png);
    background-origin: content;
    background-position: left top;
    padding-left: 2px; /*利用padding-left和padding-top来控制image的位置*/
    padding-top: 2px;
    background-repeat: no-repeat;

    background-color: #60C171;
    text-align: right bottom;
    padding-right: 2px; /*利用padding-right和padding-bottom来控制文字的位置，这样不至于属性被覆盖*/
    padding-bottom: 2px;
    font-size: 12px;
    color: #FFFFFF;
}

QPushButton#pushButton_10 {
    background-color: #60C171;
    background-image: url(:/images/home_small.png);
    background-origin: content;
    background-position: right bottom;
    padding-right: 2px;
    padding-bottom: 2px;
    background-repeat: no-repeat;

    background-color: #60C171;
    text-align: left top;
    padding-left: 2px;
    padding-top: 2px;
    font-size: 12px;
    color: #FFFFFF;
}

QPushButton#pushButton_11 {
    background-color: #60C171;
    background-image: url(:/images/home_small.png);
    background-origin: content;
    background-position: top;
    padding-top: 2px;
    background-repeat: no-repeat;

    background-color: #60C171;
    text-align: bottom;
    padding-bottom: 2px;
    font-size: 12px;
    color: #FFFFFF;
}

QPushButton#pushButton_12 {
    background-color: #60C171;
    background-image: url(:/images/home_small.png);
    background-origin: content;
    background-position: left;
    padding-left: 2px;
    background-repeat: no-repeat;

    background-color: #60C171;
    text-align: right;
    padding-right: 2px;
    font-size: 12px;
    color: #FFFFFF;
}

代码下载：
百度云
链接：https://pan.baidu.com/s/1wqZXgGM_xT2cjnQ8ZMhYyw
提取码：bsgw

参考；
QPushButton通过Qss控制背景图片位置

关于CSS3 background-origin属性

Qss样式的盒子模型