How to center labels and Entry fields in Tkinter Python?

Viewed 49

Im making a data base program where the user is prompted with a login screen, but i have an issue below.

#Importing module
import tkinter as tk
from tkinter import *

#Window
root = tk.Tk()  
root.geometry('400x120') 
root.title('DATABASE PROTOTYPE V.1')

#Fullscreen Toggle
root.attributes('-fullscreen', True)

#Title Displayed
Label(root, text="DATABASE PROTOTYPE V.1",
   font=('Helvetica 12 bold'),
background="yellow3").grid(row=250, column=250, pady=650, padx= 1005)

#Entry_Label 
tk.Label(root, text="username:",font=('Times New Roman',20)).grid(pady=1,padx =5,row=2)
tk.Label(root,text="password:",font=('Times New Roman',20)).grid(pady=1,padx =5,row=1)

#Entry
e = tk.Entry(root,font=('April 16'))
en = tk.Entry(root,show = '*', font=('April 16'))
e.grid(row=0, column=1) 
en.grid(row=1, column=1) 
e.place(x=125,y=10)
en.place(x=125,y=47)

#Buttons
ButtonOne = tk.Button(text ="EXIT",font=('April 8'), command = root.destroy, pady= 1, padx= 1)
ButtonOne.place (x=360, y=90)

ButtonTwo = tk.Button(text ="INFO", font=('April 8'), command = root.destroy, pady= 1, padx= 1)
ButtonTwo.place (x=325, y=90)

ButtonThree = tk.Button(text ="ABOUT", font=('April 8'), command = root.destroy, pady= 1, padx= 1)
ButtonThree.place (x=275, y=90)

ButtonFour = tk.Button(text ="FORGOT CREDENTIALS?", font=('April 8'), command = root.destroy, pady= 1, padx= 1)
ButtonFour.place (x=140, y=90)

#Database

#End
root.mainloop()

when this code specifically runs, the labels for the entry are all the way on the top left, how do I fix this?

3 Answers

I would suggest you use the pack geometry manager instead of place and grid. Pack places your widgets at the center automatically. Since you have two widgets (label and entry) side by side, you could use the side option and specify side= either LEFT or RIGHT. Pack also gives you options to manipulate the widget depending on the space available. i.e. expand and fill.

how pack allows you to place widgets on the window

Check out this link to learn more... https://www.pythontutorial.net/tkinter/tkinter-pack/

Edit: updated line numbered.

I changed in line 6 and 15. Comment out in line 10.

In Line 15 don't set value too high row=250, column=250, pady=650, padx= 1005)

import tkinter as tk
from tkinter import *

#Window
root = tk.Tk()  
root.geometry('400x200') 
root.title('DATABASE PROTOTYPE V.1')

#Fullscreen Toggle
#root.attributes('-fullscreen', True)

#Title Displayed
Label(root, text="DATABASE PROTOTYPE V.1",
   font=('Helvetica 12 bold'),
background="yellow3").grid(row=50, column=50, pady=50, padx= 5)

#Entry_Label 
tk.Label(root, text="username:",font=('Times New Roman',20)).grid(pady=1,padx =5,row=2)
tk.Label(root,text="password:",font=('Times New Roman',20)).grid(pady=1,padx =5,row=1)

#Entry
e = tk.Entry(root,font=('April 16'))
en = tk.Entry(root,show = '*', font=('April 16'))
e.grid(row=0, column=1) 
en.grid(row=1, column=1) 
e.place(x=125,y=10)
en.place(x=125,y=47)

#Buttons
ButtonOne = tk.Button(text ="EXIT",font=('April 8'), command = root.destroy, pady= 1, padx= 1)
ButtonOne.place (x=360, y=90)

ButtonTwo = tk.Button(text ="INFO", font=('April 8'), command = root.destroy, pady= 1, padx= 1)
ButtonTwo.place (x=325, y=90)

ButtonThree = tk.Button(text ="ABOUT", font=('April 8'), command = root.destroy, pady= 1, padx= 1)
ButtonThree.place (x=275, y=90)

ButtonFour = tk.Button(text ="FORGOT CREDENTIALS?", font=('April 8'), command = root.destroy, pady= 1, padx= 1)
ButtonFour.place (x=140, y=90)

#Database

#End
root.mainloop()

Output:

enter image description here

If you want to make your GUI responsive, it is better to use .grid() or .pack() instead of .place(). Also in order to be more easy to layout your GUI, group related widgets in frames.

Suggest to put the labels, entries and buttons in a frame because it is more easier to put the frame in the center.

Below is the modified code:

#Importing module
import tkinter as tk

#Window
root = tk.Tk()
#root.geometry('400x200')
root.title('DATABASE PROTOTYPE V.1')

#Fullscreen Toggle
#root.attributes('-fullscreen', True)

#Title Displayed at the bottom-right corner
tk.Label(root, text="DATABASE PROTOTYPE V.1", font=('Helvetica 12 bold'),
         background="yellow3").pack(side=tk.BOTTOM, anchor='e')

input_frame = tk.Frame(root, padx=50, pady=50)
input_frame.pack(expand=1) # make the frame at the center of its parent

#Entry_Label
tk.Label(input_frame, text="username:", font=('Times New Roman',20)).grid(pady=1, padx=5, row=0)
tk.Label(input_frame, text="password:", font=('Times New Roman',20)).grid(pady=1, padx=5, row=1)

#Entry
e = tk.Entry(input_frame, font=('April 16'))
en = tk.Entry(input_frame, show='*', font=('April 16'))
e.grid(row=0, column=1)
en.grid(row=1, column=1)

# frame for those buttons
button_frame = tk.Frame(input_frame)
button_frame.grid(columnspan=2, sticky='e')

#Buttons
ButtonOne = tk.Button(button_frame, text="EXIT",font=('April 8'),
                      command=root.destroy, pady=1, padx=1)
ButtonOne.pack(side='left')

ButtonTwo = tk.Button(button_frame, text="INFO", font=('April 8'),
                      command=root.destroy, pady=1, padx=1)
ButtonTwo.pack(side='left')

ButtonThree = tk.Button(button_frame, text="ABOUT", font=('April 8'),
                        command=root.destroy, pady=1, padx=1)
ButtonThree.pack(side='left')

ButtonFour = tk.Button(button_frame, text="FORGOT CREDENTIALS?", font=('April 8'),
                       command=root.destroy, pady=1, padx=1)
ButtonFour.pack(side='left')

#Database

#End
root.mainloop()

And the result:

enter image description here

Related