Position buttons next to each other in the center of page

Question

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    lt  doctype html gt   lt html lang  en  gt    lt head gt   lt style gt   button1  width  300px  height  40px      button2  width  300px  height  40px     lt  style gt    lt meta charset  utf-8  gt   lt meta name  Homepage  content  Starting page for the survey website   gt     lt title gt  Survey HomePage lt  title gt   lt  head gt   lt body gt    lt img src  kingstonunilogo jpg  alt  uni logo  style  width 180px height 160px  gt    lt button type  button home-button  id  button1   gt Home lt  button gt    lt button type  button contact-button  id  button2  gt Contact Us lt  button gt   lt  body gt    lt  html gt

User · Answer

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

_x000D_

#button1, #button2{_x000D_
width: 200px;_x000D_
height: 40px;_x000D_
}_x000D_
_x000D_
#butn{_x000D_
    margin: 0 auto;_x000D_
    display: block;_x000D_
}

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

_x000D_

User · Answer

jsFiddle http   jsfiddle net 7Laf8 1302   I hope this answers your question    x000D   x000D   wrapper   x000D    text-align  center  x000D    display  inline-block  x000D    position  absolute  x000D    top  50   x000D    left  50   x000D    x000D   lt div class  wrapper  gt  x000D     lt button class  button  gt Hello lt  button gt  x000D     lt button class  button  gt Another One lt  button gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

wrapper    float  left    width  100     text-align  center    position  relative    top  50     left  50     transform  translate -50   -50       button    display inline-block      lt div class  quot wrapper quot  gt     lt button class  quot button quot  gt Button1 lt  button gt     lt button class  quot button quot  gt Button2 lt  button gt   lt  div gt

User · Answer

you can add this style to your buttons   button1    button2   display inline-block     additional code        this aligns your buttons inline    side by side

User · Answer

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

User · Answer

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    lt img src  kingstonunilogo jpg  alt  uni logo  style  width 180px height 160px  gt   lt br gt  lt br gt   lt div id  container  gt       lt button type  button home-button  id  button1   gt Home lt  button gt       lt button type  button contact-button  id  button2  gt Contact Us lt  button gt   lt  div gt

User · Answer

If you are using bootstrap then the below solution will work   x000D   x000D   lt div gt       lt button type  submit  class  btn btn-primary   gt Invoke User Endpoint lt  button gt       lt button type  submit  class  btn btn-primary ml-3  gt Invoke Hello Endpoint lt  button gt   lt  div gt  x000D   x000D   x000D

User · Answer

your code will look something like this       lt  doctype html gt   lt html lang  en  gt    lt head gt   lt style gt   button1  width  300px  height  40px      button2  width  300px  height  40px    display inline-block   lt  style gt    lt meta charset  utf-8  gt   lt meta name  Homepage  content  Starting page for the survey website   gt     lt title gt  Survey HomePage lt  title gt   lt  head gt   lt body gt   lt center gt   lt img src  kingstonunilogo jpg  alt  uni logo  style  width 180px height 160px  gt    lt button type  button home-button  id  button1   gt Home lt  button gt    lt button type  button contact-button  id  button2  gt Contact Us lt  button gt   lt  center gt   lt  body gt    lt  html gt

User · Answer

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

[html] Position buttons next to each other in the center of page

Examples related to html

Examples related to css