How do get my buttons to align with the centre in tkinter?

user_13762764 0
Viewed 56

Im trying to create a home page with multiple buttons with this layout:layout of my design

With my code below the buttons seem to always stick to the left no matter what I do. Anyone have any fixes for this?

from tkinter import *

home = Tk()
home.title("Home Page")
home.geometry('1200x900')   #creates dimensions of page
home.resizable(0,0)      #will disable max/min tab of window

#seperating the page into sections
header = LabelFrame(home, bg="#12a8e3")
content = LabelFrame(home, bg="white")

home.columnconfigure(0, weight=1) # 100%
home.rowconfigure(0, weight=2) # 2%
home.rowconfigure(1, weight=98) # 98%

#creating the title of the page to be displayed in the header
title = Label(header, text="School Subjects Quiz", bg="#12a8e3", fg="white", font=("Ariel",35, "bold"), padx=10, pady=10)
title.pack(expand=TRUE)

questionsButton = Button(content, text="Questions", padx=250, pady=150)
questionsButton.grid(row=0, column=0, columnspan=3, padx=50, pady=50)

accountButton = Button(content, text="Account", padx=150, pady=150)
accountButton.grid(row=1, column=0, padx=50, pady=50)

resourceButton = Button(content, text="Revision Resources", padx=150, pady=150)
resourceButton.grid(row=1, column=2, padx=50, pady=50)

header.grid(row=0, sticky='news')
content.grid(row=1, sticky='news')

home.mainloop()
tkinter python
3 Answers

I made some changes to your code below that seems to center the buttons like you're looking for. I removed the fixed geometry, the window will size itself. You also were mixing pack and grid, which can cause headaches like this to occur. It is best to pick one method and stick with it. Giving the first column in the header Frame a weight of one will make the label expand to fill all available space, centering it in the column.

from tkinter import *

home = Tk()
home.title("Home Page")
# Removed fixed geometry
home.resizable(0,0)

header = LabelFrame(home, bg="#12a8e3")
content = LabelFrame(home, bg="white")

header.columnconfigure(0, weight=1) # Forces column to expand to fill all available space

title = Label(header, text="School Subjects Quiz", bg="#12a8e3", fg="white", font=("Ariel",35, "bold"), padx=10, pady=10)
title.grid(row=0, column=0, columnspan=3) # Changed from pack to grid for consistency

questionsButton = Button(content, text="Questions", padx=250, pady=150)
questionsButton.grid(row=1, column=0, columnspan=3, padx=50, pady=50)

accountButton = Button(content, text="Account", padx=150, pady=150)
accountButton.grid(row=2, column=0, padx=50, pady=50)

resourceButton = Button(content, text="Revision Resources", padx=150, pady=150)
resourceButton.grid(row=2, column=1, padx=50, pady=50)

header.grid(row=0, sticky='NSEW')
content.grid(row=1, sticky='NSEW')

home.mainloop()
user_128094920

A general rule of thumb is that you should always give a non-zero weight to at least one row and one column in every widget that uses grid to manage its children. You are doing that for the root window but you are not doing that for the content window.

If you don't give columns a weight, and the window is larger than it needs to be to contain its children, the extra space will go unused. That is what is happening here - there is extra space on the right side of the content frame which isn't being used.

In your case you appear to be wanting three columns. So that those three columns together will fill the window, you should give every column an equal weight, or at least columns 0 and 2. You have a lot of other padding going on so it's hard to tell precisely what you want.

content.grid_columnconfigure((0,1,2), weight=1)

If you want to guarantee that all three columns are the same width, you can use the uniform option. All columns (or rows) with the same value for this option will be the same size. It doesn't matter what the value is.

content.grid_columnconfigure((0,2), weight=1, uniform="anything")
user_74320

I would use the .grid method, that's what I use and it works fine or you can look at the official documentation to see if there is any thing else.

user_106891850
Related