Ask coding questions

← Back to all posts
Need help with centering buttons.
ryaalbr (6)

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 (614) [earned 5 cycles]
View Answer
Commentshotnewtop
eankeen (614)

hey!

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

ryaalbr (6)

@eankeen Thanks for the solution!

Geocube101 (252)

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

#buttons
{
  text-align: center;
}