pyqt4 widget appear outside the layout

Question

I want the effect in the picture. The qlabel is in the layout, and the font is centered. Below is the code I wrote, which is different from what I want. First, qlabel is outside the layout, and second, the font is not centered.

import sys

from PyQt4.QtCore import Qt
from PyQt4.QtGui import QLabel, QApplication, QWidget, QVBoxLayout, QStyleOption, QPainter, QStyle


class Example(QWidget):
    def __init__(self):
        super(Example, self).__init__()
        self.setGeometry(100, 100, 500, 500)

        vbox = QVBoxLayout()
        self.setLayout(vbox)

        a = QLabel('aaa')
        b = QLabel('bbb')
        vbox.addWidget(a)
        vbox.addWidget(a, alignment=Qt.AlignHCenter | Qt.AlignTop)
        vbox.addWidget(b, alignment=Qt.AlignHCenter | Qt.AlignBottom)

        self.setStyleSheet("""
                Example{
             border-width: 1px;
             border-style: solid;
             border-color: red;
                min-width:500px;
                 max-width:500px;
                 min-height:500px;
                 max-height:500px;
                 padding:1px 1px 1px 1px;
                 margin-bottom:30px;
                }
            QLabel{
                min-width:500px;
                 max-width:500px;
                 min-height:50px;
                 max-height:50px;
                 margin:0px;
                 padding:0px;
                 background-color:#cdcdcd;
                 text-align: center center;
            }
        """)
        self.show()

    def paintEvent(self, event):
        super(Example, self).paintEvent(event)
        opt = QStyleOption()
        opt.initFrom(self)
        painter = QPainter(self)
        painter.setRenderHint(QPainter.Antialiasing)
        self.style().drawPrimitive(QStyle.PE_Widget, opt, painter, self)


def main():
    app = QApplication(sys.argv)
    ex = Example()
    sys.exit(app.exec_())


if __name__ == '__main__':
    main()

Answer 1

The logic of the layouts is to handle the geometry of the elements but you are also handling the geometry with the stylesheet, causing the problem you observe. On the other hand, the QLabel does not have the text-align property but you have to use qproperty-alignment: AlignCenter;.

To avoid this it is better to avoid managing the geometry with stylesheet but with the methods of the class, considering the solution is:

import sys

from PyQt4.QtCore import Qt
from PyQt4.QtGui import (
    QLabel,
    QApplication,
    QWidget,
    QVBoxLayout,
    QStyleOption,
    QPainter,
    QStyle,
)


class Example(QWidget):
    def __init__(self):
        super(Example, self).__init__()
        self.setGeometry(100, 100, 500, 500)

        self.label_a = QLabel("aaa")
        self.label_b = QLabel("bbb")
        self.label_a.setFixedHeight(50)
        self.label_b.setFixedHeight(50)

        vbox = QVBoxLayout(self)
        vbox.setContentsMargins(1, 1, 1, 1)
        vbox.addWidget(self.label_a)
        vbox.addWidget(QWidget(), stretch=1)
        vbox.addWidget(self.label_b)

        self.setFixedSize(500, 500)

        self.setStyleSheet(
            """
        Example{
            border-width: 1px;
            border-style: solid;
            border-color: red;
            padding:1px 1px 1px 1px;
        }
        QLabel{
            margin:0px;
            padding:0px;
            background-color:#cdcdcd;
            qproperty-alignment: AlignCenter;
        }
        """
        )

    def paintEvent(self, event):
        super(Example, self).paintEvent(event)
        opt = QStyleOption()
        opt.initFrom(self)
        painter = QPainter(self)
        painter.setRenderHint(QPainter.Antialiasing)
        self.style().drawPrimitive(QStyle.PE_Widget, opt, painter, self)


def main():
    app = QApplication(sys.argv)
    ex = Example()
    ex.show()
    sys.exit(app.exec_())


if __name__ == "__main__":
    main()