htmlcss

Position buttons next to each other in the center of page

I'm trying to position the two buttons next to each other in the center of the page and also make the buttons static as you resize the page.

#button1 {
  width: 300px;
  height: 40px;

}

#button2 {
  width: 300px;
  height: 40px;
}
<img src="kingstonunilogo.jpg" alt="uni logo" style="width: 180px; height: 160px;">
<button type="button home-button" id="button1">Home</button>
<button type="button contact-button" id="button2">Contact Us</button>

Solution

  • You can add this style to your buttons:

    #button1, #button2 {
   display: inline-block;
   /* additional code */
}

    this aligns your buttons inline. ('side by side')