简体   繁体   中英

Button and Label won't center in Tkinter (Python 3.8)

I'm writing a login interface, my problem is that the login button, and two other labels (one has an image attached to it) won't center in the window. I included a link to an image of the window in this question so you can get a better understanding of what's happening. The problem is in the loginButton, poweredByLabel and the gmailLabel. Here is my code:

emailLabel = Label(contactDeveloperWindow, font = (contactDeveloperFont), text = "Your email:", bg = "#DCDCDC")
emailLabel.grid(row = 1, column = 0, sticky = "w")

emailEntry = Entry(contactDeveloperWindow, font = (contactDeveloperFont), width = 40, borderwidth = 2, relief = "groove")
emailEntry.grid(row = 1, column = 1, columnspan = 3, sticky = "w")
emailEntry.insert(0, "example@gmail.com")

passwordLabel = Label(contactDeveloperWindow, font = (contactDeveloperFont), text = "Password:  ", bg = "#DCDCDC")
passwordLabel.grid(row = 2, column  = 0, sticky = "w")

passwordEntry = Entry(contactDeveloperWindow, font = (contactDeveloperFont), width = 37, borderwidth = 2, relief = "groove", show = "*")
passwordEntry.grid(row = 2, column = 1, sticky = "w")

hidePassword = ImageTk.PhotoImage(Image.open("hide.png"), master = contactDeveloperWindow)
togglePassword = Button(contactDeveloperWindow, image = hidePassword, relief = "groove", bg = "#DCDCDC", command = updatePassword)
togglePassword.image = hidePassword
togglePassword.grid(row = 2, column = 3, sticky = "w")

loginButton = Button(contactDeveloperWindow, font = (contactDeveloperFont), text = "Login", width = 17, padx = 5, pady = 5, relief = "groove", bg = "#DCDCDC")
loginButton.grid(row = 5, column = 0, columnspan = 3)

poweredByLabel = Label(contactDeveloperWindow, font = ('Consolas', 10), text = "powered by", bg = "#DCDCDC")
poweredByLabel.grid(row = 7, column = 0, columnspan = 3)

gmailLogo = ImageTk.PhotoImage(Image.open("powered by.png"), master = contactDeveloperWindow)
gmailLabel = Label(contactDeveloperWindow, image = gmailLogo, bg = "#DCDCDC")
gmailLabel.image = gmailLogo
gmailLabel.grid(row = 8, column = 0, columnspan = 3)

hiddenLabel = Label(contactDeveloperWindow, font = ('Consolas', 1), text = "", bg = "#DCDCDC")
hiddenLabel.grid(row = 0, column = 0, columnspan = 3, sticky = "we")

hiddenLabel = Label(contactDeveloperWindow, font = ('Consolas', 1), text = "", bg = "#DCDCDC")
hiddenLabel.grid(row = 3, column = 0, columnspan = 3, sticky = "we")

hiddenLabel = Label(contactDeveloperWindow, font = ('Consolas', 1), text = "", bg = "#DCDCDC")
hiddenLabel.grid(row = 4, column = 0, columnspan = 3, sticky = "we")

hiddenLabel = Label(contactDeveloperWindow, font = ('Consolas', 1), text = "", bg = "#DCDCDC")
hiddenLabel.grid(row = 6, column = 0, columnspan = 3, sticky = "we")

窗口图像

I can't run code so I only guess

You have to use column=2 instead of column=3 for togglePassword


If you want to keep column=3 then you have to use columnspan=4 instead of columnspan=3 because you will have from column=0 to column=3 which gives 4 columns.


EDIT: More complex change is to use two Frames . At the top Frame with Entries using grid() . At the bottom Frame with login button and image using pack() .

In example I keep only important elements. And I use pack(pady=...) to create spaces between elements instead of using empty labels.

from tkinter import *

contactDeveloperWindow = Tk()

# --- top ---

top_frame = Frame(contactDeveloperWindow)
top_frame.pack(pady=10)

emailLabel = Label(top_frame, text="Your email:")
emailLabel.grid(row=1, column=0)

emailEntry = Entry(top_frame)
emailEntry.grid(row=1, column=1)
emailEntry.insert(0, "example@gmail.com")

passwordLabel = Label(top_frame, text="Password:")
passwordLabel.grid(row=2, column=0, sticky="w")

passwordEntry = Entry(top_frame, show="*")
passwordEntry.grid(row=2, column=1)

togglePassword = Button(top_frame, text="O")
togglePassword.grid(row=2, column=2)

# --- bottom ---

bottom_frame = Frame(contactDeveloperWindow)
bottom_frame.pack()

loginButton = Button(bottom_frame, text="Login")
loginButton.pack(pady=(0,10))

poweredByLabel = Label(bottom_frame, text="powered by")
poweredByLabel.pack(pady=(0,10))

gmailLabel = Label(bottom_frame, text="[place for logo]" )
gmailLabel.pack(pady=(0,10))

contactDeveloperWindow.mainloop()

在此处输入图像描述

You can do it even without bottom frame:

from tkinter import *

contactDeveloperWindow = Tk()

# --- top ---

top_frame = Frame(contactDeveloperWindow)
top_frame.pack(pady=10)

emailLabel = Label(top_frame, text="Your email:")
emailLabel.grid(row=1, column=0)

emailEntry = Entry(top_frame)
emailEntry.grid(row=1, column=1)
emailEntry.insert(0, "example@gmail.com")

passwordLabel = Label(top_frame, text="Password:")
passwordLabel.grid(row=2, column=0, sticky="w")

passwordEntry = Entry(top_frame, show="*")
passwordEntry.grid(row=2, column=1)

togglePassword = Button(top_frame, text="O")
togglePassword.grid(row=2, column=2)

# --- bottom ---

loginButton = Button(contactDeveloperWindow, text="Login")
loginButton.pack(pady=(0,10))

poweredByLabel = Label(contactDeveloperWindow, text="powered by")
poweredByLabel.pack(pady=(0,10))

gmailLabel = Label(contactDeveloperWindow, text="[place for logo]" )
gmailLabel.pack(pady=(0,10))

contactDeveloperWindow.mainloop()

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM