11

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>
3
  • 1
    What do you mean by "side by side"?
    – gab06
    Dec 27, 2014 at 21:47
  • I mean have them next to each other, with the above code they are next to each other but change position as you resize the page. Also i'd like to have them side by side in the centre of the page.
    – Hollywood
    Dec 27, 2014 at 21:49
  • 1
    Not an answer to the question, but you may want to consider using a more semantic <nav><a href="/home">Home</a></nav> sort of navigation rather than using buttons.
    – apaul
    Dec 27, 2014 at 22:19

9 Answers 9

18

you can add this style to your buttons:

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

this aligns your buttons inline. ('side by side') :)
4
  • 10
    That doesn't put them in the center of the page.
    – gab06
    Dec 28, 2014 at 15:47
  • 1
    How to decide the space between the two buttons? Oct 24, 2018 at 5:29
  • you can use margin for space between them
    – Ammargraph
    Dec 15, 2018 at 17:48
  • 1
    Where is the "in the center of the page" part?
    – stodi
    Dec 15, 2020 at 15:28
9

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>
1
  • In the jsfiddle, if you resize the result window long enough, the buttons place next to each other.
    – gab06
    Dec 27, 2014 at 22:09
9

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/

0

jsFiddle:http://jsfiddle.net/7Laf8/1302/

I hope this answers your question.

.wrapper {
  text-align: center;
  display: inline-block;
  position: absolute;
  top: 50%;
  left: 50%;
}
<div class="wrapper">
  <button class="button">Hello</button>
  <button class="button">Another One</button>
</div>

0

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.

0

Have both the buttons inside a div as shown below and add the given CSS for that div

#button1, #button2{
width: 200px;
height: 40px;
}

#butn{
    margin: 0 auto;
    display: block;
}
<div id="butn">
	<button type="button home-button" id="button1" >Home</button>
	<button type="button contact-button" id="button2">Contact Us</button>
<div>

0

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>
0

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>

0
.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>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.