Align Button To The center Of the window using pysimplegui

Question

In my application am trying to place my button,text and input at the center of the window.I am using PySimpleGUI for designing buttons.For aligning to the center i used justification='center' attribute on my code.But still it is not fitting to the center of the window.

The code am working with is

import PySimpleGUI as sg
from tkinter import * 
sg.theme('DarkAmber')  
layout = [ 
        [sg.Text('Enter the value',justification='center')],
        [sg.Input(justification='center')],
        [sg.Button('Enter','center')]
     ]


  window = sg.Window('My new window', layout, size=(500,300), grab_anywhere=True)

 while True:
event, values = window.read()   # Read the event that happened and the values dictionary
print(event, values)
if event == sg.WIN_CLOSED or event == 'Exit':     # If user closed window with X or if user clicked "Exit" button then exit
    break
if event == 'Button':
  print('You pressed the button')
window.close()

The above code outputs How can i make the text,button and input to the center of the window?

Answer 1

I think this is what you're looking for

window = sg.Window('My new window', layout, element_justification='c')

---

Edit - Centering vertically (SEE MARCH 2022 edit below for a BETTER solution)

Centering a layout vertically in a window is quite a bit bigger of a chore. What's required are 2 elements that will expand when the window expands. This is a demo program that is part of the Demos on the PySimpleGUI GitHub

import PySimpleGUI as sg

"""
    Center a column in a window
    Solves a very specific kind of layout.
    If you want to have something centered in a Window, this is a good way to do it
    The "trick" here is:
        * the first row of the layout has a Text element that expands vertically
        * the row with the Column has a text element that expands horizontally
    
    This expanding Text element is what will cause the Column element to be centered

    Used with permission
"""

def main():
    column_to_be_centered = [  [sg.Text('My Window')],
                [sg.Input(key='-IN-')],
                [sg.Text(size=(12,1), key='-OUT-')],
                [sg.Button('Go'), sg.Button('Exit')]  ]

    layout = [[sg.Text(key='-EXPAND-', font='ANY 1', pad=(0, 0))],  # the thing that expands from top
              [sg.Text('', pad=(0,0),key='-EXPAND2-'),              # the thing that expands from left
               sg.Column(column_to_be_centered, vertical_alignment='center', justification='center',  k='-C-')]]

    window = sg.Window('Window Title', layout, resizable=True,finalize=True)
    window['-C-'].expand(True, True, True)
    window['-EXPAND-'].expand(True, True, True)
    window['-EXPAND2-'].expand(True, False, True)

    while True:             # Event Loop
        event, values = window.read()
        print(event, values)
        if event == sg.WIN_CLOSED or event == 'Exit':
            break
        if event == 'Go':
            window['-OUT-'].update(values['-IN-'])
    window.close()

if __name__ == '__main__':
    main()

---

Edit 18-Mar-2022

Like so many things in PySimpleGUI, operations like element justification are continually evolving. The problem, again, with StackOverflow is that these answers are not typically updated. It's why I suggest always using the GitHub Issues to ask questions and to check the Cookbook, eCookbook and Demo Programs to get the latest techniques.

Last year two new elements were introduced that make both horizontal and vertical justification trivial. These elements are Push and VPush. You'll find a recipe in the eCookbook.

These elements "push" other elements around. Push moves them horizontally and VPush moves them vertically.

If you put a push on both sides of elements/rows, then those elements/rows will be centered.

Here's the same layout in the above example except using these Push and VPush elements. This solution is much shorter & much easier to understand.

import PySimpleGUI as sg

def main():
    column_to_be_centered = [  [sg.Text('My Window')],
                [sg.Input(key='-IN-')],
                [sg.Text(size=(12,1), key='-OUT-')],
                [sg.Button('Go'), sg.Button('Exit')]]

    layout = [[sg.VPush()],
              [sg.Push(), sg.Column(column_to_be_centered,element_justification='c'), sg.Push()],
              [sg.VPush()]]

    window = sg.Window('Window Title', layout, size=(500,300))

    while True:
        event, values = window.read()
        if event == sg.WIN_CLOSED or event == 'Exit':
            break

    window.close()


if __name__ == '__main__':
    main()

Answer 2

this code make the text, button and input to the center of the window.

import PySimpleGUI as sg
sg.theme('DarkAmber')  
layout = [ 
        [sg.Text('Enter the value',justification='center',size=(100,1))],
        [sg.Input(justification='center',size=(100,1))],
        [sg.Button('Enter','center',size=(100,1))]
     ]


window = sg.Window('My new window', layout, size=(500,300), grab_anywhere=True)

while True:
    event, values = window.read()   # Read the event that happened and the values dictionary
    print(event, values)
    if event == None or event == 'Exit':     # If user closed window with X or if user clicked "Exit" button then exit
        break
    if event == 'Button':
      print('You pressed the button')
    window.close()

Answer 3

Best one should be option element_justification='center' for Container sg.Column, maybe not all elements aligned center of window required.

import PySimpleGUI as sg

sg.theme('DarkAmber')

layout_column = [
        [sg.Text('Enter the value',justification='center')],
        [sg.Input(justification='center', key='-INPUT-')],
        [sg.Button('Enter')]
]

layout = [[sg.Column(layout_column, element_justification='center')]]

window = sg.Window('My new window', layout, grab_anywhere=True)

while True:
    event, values = window.read()
    print(event, values)
    if event == sg.WIN_CLOSED or event == 'Exit':
        break
    if event == 'Button':
        print('You pressed the button')
window.close()

Answer 4

If you want more direct control of where your elements appear, you can use the pad keyword inside nearly all of the elements (button, text, in, etc.).

There are two valid formats:

• pad=(<int>, <int>) where pad[0] is padding to the left and right and pad[1] is padding above and below the element.
• pad=((<int>, <int>), (<int>, <int>)) where the first tuple is padding to the left (first element) and right (second element) and the second tuple is padding above (first) and below (second).

So, to center to elements in your code example using the pad keyword, you would do something like this:

import PySimpleGUI as sg
sg.theme('DarkAmber')
layout = [
        [sg.Text('Enter the value', pad=(190, 0))],
        [sg.Input(justification='center', pad=(75, 0))],
        [sg.Button('Enter', pad=(215, 0))]
     ]


window = sg.Window('My new window', layout,
                   size=(500, 300), grab_anywhere=True)

while True:
    # Read the event that happened and the values dictionary
    event, values = window.read()
    print(event, values)
    # If user closed window with X or if user clicked "Exit" button then exit
    if event == sg.WIN_CLOSED or event == 'Exit':
        break
    if event == 'Button':
        print('You pressed the button')
    window.close()

NOTE: The above code was altered slightly from the original to match PEP8 standards.

The result is:

Answer 5

I believe the simplest solution is to insert a blank label to the left of the button or buttons.

# center buttons using an empty label
bt: dict={'size':(4,1)}
[sg.Text('',size=(3,1)), sg.Button('Add',**bt), sg.Button('Clear',**bt)]]