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?
Answers:
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()
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()
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()
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:
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)]]
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?
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()
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()
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()
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>)
wherepad[0]
is padding to the left and right
andpad[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:
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)]]