Ask coding questions

← Back to all posts
Need help with centering buttons.

I am working on a piano program. I need help formatting a line of buttons so that the line is vertically and horizontally centered. If you have an answer, please let me know.

Answered by eankeen (993) [earned 5 cycles]
View Answer
eankeen (993)


one quick and simple solution is the use of css flexboxes

on your parent object (which looks to be body), you would make it flex

body {
    display: flex;
    align-items: center;
    justify-content: center;

the align-items: center; center aligns the #buttons div vertically
the justify-content: center; center aligns the #buttons div horizontally

be sure that your body and html tags take up the whole screen

html, body {
    height: 100%;
    width: 100%;

hope that helped :)


@eankeen Thanks for the solution!

Geocube101 (528)

For horizontal alignment try setting <div id="buttons"> text-align property to center

  text-align: center;