Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Position buttons next to each other in the center of page

Tags:

html

css

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.

<!doctype html>
<html lang="en">

<head>
<style>
#button1{
width: 300px;
height: 40px;

}
#button2{
width: 300px;
height: 40px;
}
</style>

<meta charset="utf-8">
<meta name="Homepage" content="Starting page for the survey website ">

 <title> Survey HomePage</title>
</head>
<body>

<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>
</body>
 </html>
like image 436
Hollywood Avatar asked Dec 27 '14 21:12

Hollywood


People also ask

How do I center two buttons in HTML?

Sometimes you might want to have two buttons next to each other, but to center both together on the page. You can achieve this by wrapping both buttons in a parent <div> and using flexbox to center them on the page. Notice that we also added margin-right: 20px to the first button, in order to add space between them.

How do you align a button to the center?

We can align the buttons horizontally as well as vertically. We can center the button by using the following methods: text-align: center - By setting the value of text-align property of parent div tag to the center. margin: auto - By setting the value of margin property to auto.


1 Answers

you can add this style to your buttons:

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

this aligns your buttons inline. ('side by side') :)
like image 72
Ammargraph Avatar answered Sep 30 '22 20:09

Ammargraph