Important: Please read the Qt Code of Conduct - https://forum.qt.io/topic/113070/qt-code-of-conduct

Align Qt Quick element vertically in ColumnLayout



  • Hi,

    I would like to have a centered label and two buttons at the bottom of the screen, something like this:

    +--------------------+
    |                    |
    |                    |
    |                    |
    |       Hello        |
    |                    |
    |                    |
    |                    |
    |       [play]       |
    |       [quit]       |
    +--------------------+
    

    Here is my code, everything works except the label is not centered vertically but centered horizontally at the top of the screen.

    import QtQuick 2.0
    import QtQuick.Layouts 1.3
    import QtQuick.Controls 2.2
    
    ColumnLayout {
        Label {
            text: "Save the Ball!"
            font.pointSize: 60
            Layout.fillHeight: true
            Layout.alignment: Qt.AlignCenter
        }
    
        Button {
            text: "Play"
            Layout.fillWidth: true
        }
    
        Button {
            text: "Quit"
            Layout.fillWidth: true
        }
    }
    

    Do you have an idea what I'm doing wrong?

    Thanks!



  • @David-Demelier
    Hi,
    Because the text is aligned at top inside the Label, this should do what you want:

     Label {
            text: "Save the Ball!"
            font.pointSize: 60
            verticalAlignment: Text.AlignVCenter
            Layout.fillHeight: true
            Layout.alignment: Qt.AlignCenter
        }
    
    


  • Thank you very much, that indeed did the trick :)


Log in to reply