Python 3.8 Tkinter登录界面按钮与标签无法居中问题求助

Got it, let's figure out why your loginButton, poweredByLabel, and gmailLabel aren't centering in the window. The problem boils down to how Tkinter's grid layout works—right now, even with columnspan=3, those widgets are sticking left because your columns aren't set to expand, so the grid cells they're in don't take up the full window width.

Here are two simple fixes to get them centered properly:

Option 1: Stretch Widgets to Fill the Window (Clean, Responsive Fix) #

First, we'll make all your columns expand evenly when the window resizes, then set the widgets to stretch horizontally across their column span. This ensures they stay centered even if the user resizes the window.

Update your code with these changes:

# Add this before defining your centered widgets—this tells Tkinter to give equal space to each column
for col in range(4):  # You have columns 0 through 3
    contactDeveloperWindow.grid_columnconfigure(col, weight=1)

# Now update the grid calls for your widgets:
loginButton.grid(row=5, column=0, columnspan=3, sticky="ew")
poweredByLabel.grid(row=7, column=0, columnspan=3, sticky="ew")
gmailLabel.grid(row=8, column=0, columnspan=3, sticky="ew")

# For the text label, add justify=CENTER to make sure the text itself is centered inside the widget
poweredByLabel = Label(contactDeveloperWindow, font=('Consolas', 10), text="powered by", bg="#DCDCDC", justify=CENTER)

Option 2: Center Without Stretching (Quick Fix) #

If you don't want the widgets to stretch and just want them to sit in the middle, you can skip the sticky parameter entirely—just make sure the columns are set to expand so the grid cells have space around the widgets.

# Same column configuration first
for col in range(4):
    contactDeveloperWindow.grid_columnconfigure(col, weight=1)

# Grid the widgets without any sticky value (or set sticky="")
loginButton.grid(row=5, column=0, columnspan=3)
poweredByLabel.grid(row=7, column=0, columnspan=3)
gmailLabel.grid(row=8, column=0, columnspan=3)

Why This Works #

When you set grid_columnconfigure(col, weight=1), you're telling Tkinter that each column should take up an equal share of any extra window space. Without this, the columns only fit their content, so even with columnspan=3, the widgets are left-aligned because there's no extra space to center them in.

The sticky="ew" makes the widget stretch horizontally to fill the entire column span, which centers it relative to the window. If you don't want stretching, omitting sticky lets the widget sit centered in its allocated grid space once the columns are set to expand.

Here's the full modified code using Option 1 (my recommended pick for responsiveness):

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")

# Configure column weights to enable even expansion
for col in range(4):
    contactDeveloperWindow.grid_columnconfigure(col, weight=1)

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, sticky="ew")
poweredByLabel = Label(contactDeveloperWindow, font=('Consolas', 10), text="powered by", bg="#DCDCDC", justify=CENTER)
poweredByLabel.grid(row=7, column=0, columnspan=3, sticky="ew")
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, sticky="ew")

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")

Give this a test—your login button, "powered by" text, and Gmail logo should now be nicely centered in the window!

内容的提问来源于stack exchange，提问作者Andrej