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>
jsFiddle:http://jsfiddle.net/7Laf8/1302/
I hope this answers your question.
.wrapper {_x000D_
text-align: center;_x000D_
display: inline-block;_x000D_
position: absolute;_x000D_
top: 50%;_x000D_
left: 50%;_x000D_
}<div class="wrapper">_x000D_
<button class="button">Hello</button>_x000D_
<button class="button">Another One</button>_x000D_
</div>This can be solved using the following CSS:
#container {
text-align: center;
}
button {
display: inline-block;
}
display: inline-block will put the buttons side by side and text-align: center places the buttons in the center of the page.
JsFiddle: https://jsfiddle.net/026tbk13/
If you are using bootstrap then the below solution will work.
<div>
<button type="submit" class="btn btn-primary" >Invoke User Endpoint</button>
<button type="submit" class="btn btn-primary ml-3">Invoke Hello Endpoint</button>
</div>Utilize regular buttons and set the display property to inline in order to center the buttons on a single line. Setting the display property to inline-block will also put them on the same line, but they will not be centered via that display property setting.
.wrapper{
float: left;
width: 100%;
text-align: center;
position: relative;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.button{
display:inline-block;
}
<div class="wrapper">
<button class="button">Button1</button>
<button class="button">Button2</button>
</div>
jsfiddle: http://jsfiddle.net/mgtoz4d3/
I added a container which contains both buttons. Try this:
CSS:
#button1{
width: 300px;
height: 40px;
}
#button2{
width: 300px;
height: 40px;
}
#container{
text-align: center;
}
HTML:
<img src="kingstonunilogo.jpg" alt="uni logo" style="width:180px;height:160px">
<br><br>
<div id="container">
<button type="button home-button" id="button1" >Home</button>
<button type="button contact-button" id="button2">Contact Us</button>
</div>
your code will look something like this ...
<!doctype html>
<html lang="en">
<head>
<style>
#button1{
width: 300px;
height: 40px;
}
#button2{
width: 300px;
height: 40px;
}
display:inline-block;
</style>
<meta charset="utf-8">
<meta name="Homepage" content="Starting page for the survey website ">
<title> Survey HomePage</title>
</head>
<body>
<center>
<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>
</center>
</body>
</html>
Have both the buttons inside a div as shown below and add the given CSS for that div
#button1, #button2{_x000D_
width: 200px;_x000D_
height: 40px;_x000D_
}_x000D_
_x000D_
#butn{_x000D_
margin: 0 auto;_x000D_
display: block;_x000D_
}<div id="butn">_x000D_
<button type="button home-button" id="button1" >Home</button>_x000D_
<button type="button contact-button" id="button2">Contact Us</button>_x000D_
<div>Source: Stackoverflow.com