Centering two expanding widgets in PyQt5

Question

I'm trying to center two widgets together in the middle of a window for a simple comic book reader, like the page spreads of a book, while still expanding them to the height or width of the window, and keeping their aspect ratio.

Here is some sample code that illustrates the problem. The cyan and magenta boxes represent the pages.

import sys
from PyQt5.QtGui import QImage, QPainter
from PyQt5.QtWidgets import QDialog, QHBoxLayout, QVBoxLayout, QPushButton, QSizePolicy
from PyQt5.QtCore import QSize, Qt
from PyQt5.QtWidgets import QApplication

class page_viewer(QPushButton):

    def __init__(self, parent=None, flags=None):
        super(page_viewer, self).__init__(parent)
        self.image = QImage()
        self.setSizePolicy(QSizePolicy.MinimumExpanding, QSizePolicy.MinimumExpanding)

    def set_image(self, image=QImage()):
        self.image = image
        self.update()

    def paintEvent(self, event):
        painter = QPainter(self)
        image = self.image.scaled(self.size(), Qt.KeepAspectRatio, Qt.SmoothTransformation)
        painter.drawImage(0, 0, image)

    def sizeHint(self):
        return QSize(4096, 4096)

class my_page_viewer(QDialog):
    pageIndex = 0
    spread = True

    def __init__(self):
        super().__init__()

        self.setModal(False)
        self.setWindowTitle('Untitled')
        self.setWindowFlags(
            Qt.WindowTitleHint |
            Qt.WindowMinimizeButtonHint |
            Qt.WindowMaximizeButtonHint |
            Qt.WindowCloseButtonHint
            )
        self.setMinimumSize(256, 256)
        self.setLayout(QVBoxLayout())
        self.page_layout = QHBoxLayout()
        self.layout().addLayout(self.page_layout)
        #self.page_layout.addStretch(1)
        self.left_viewer = page_viewer()
        left_image = QImage(QSize(70, 100), QImage.Format_ARGB32)
        left_image.fill(Qt.GlobalColor(10))
        self.left_viewer.set_image(left_image)
        self.page_layout.addWidget(self.left_viewer)
        self.right_viewer = page_viewer()
        right_image = QImage(QSize(70, 100), QImage.Format_ARGB32)
        right_image.fill(Qt.GlobalColor(11))
        self.right_viewer.set_image(right_image)
        self.page_layout.addWidget(self.right_viewer)
        #self.page_layout.addStretch(1)

if __name__ == '__main__':
    app = QApplication(sys.argv)
    page_viewer_dialog = my_page_viewer()
    page_viewer_dialog.show()
    sys.exit(app.exec_())

Basically, I want the cyan and magenta boxes next to each other at the center of the window, when you make the window wide. The way it is now, the cyan box is aligned all the way to the left, while the magenta box has it's left side aligned with the center of the window.

Answer 1

I solved this myself. The problem was that I was using a QImage within a QPushButton, and the image was narrower than the button. So I needed to align the image within the button. I did this by comparing the width of the left button to the width of the left image, and moving the image by that in x.