Center form submit buttons HTML CSS

Question

I m having troubles centering my HTML form submit buttons in CSS   Right now I m using        lt input value  Search  title  Search  type  submit  id  btn s  gt       lt input value  I m Feeling Lucky  title  I m Feeling Lucky  name  lucky  type  submit  id  btn i  gt    with this CSS content   btn s      width  100px      margin-left  auto      margin-right  auto      btn i       width  125px      margin-left  auto      margin-right  auto      And it s not doing anything  I know I m probably doing something stupid wrong  How can I fix this

User · Answer

One simple solution if only one button needs to be centered is something like:

<input type='submit' style='display:flex; justify-content:center;' value='Submit'>

You can use a similar style to handle several buttons.

User · Answer

http   jsfiddle net SebastianPataneMasuelli rJxQC   i just wrapped a div around them and made it align center  then you don t need any css on the buttons to center them    lt div class  buttonHolder  gt     lt input value  Search  title  Search  type  submit  id  btn s  gt      lt input value  I m Feeling Lucky  title  I m Feeling Lucky  name  lucky  type  submit  id  btn i  gt   lt  div gt    buttonHolder  text-align  center

User · Answer

Try this     lt  DOCTYPE HTML PUBLIC  -  W3C  DTD HTML 4 01 Transitional  EN   http   www w3 org TR html4 loose dtd  gt   lt head gt       lt style type  text css  gt           btn s              width 100px                      btn i               width 125px                     formbox               width 400px              margin auto 0              text-align  center                 lt  style gt   lt  head gt   lt body gt       lt form method  post  action    gt           lt div id  formbox  gt               lt input value  Search  title  Search  type  submit  id  btn s  gt                lt input value  I m Feeling Lucky  title  I m Feeling Lucky  name  lucky  type  submit  id  btn i  gt           lt  div gt       lt  form gt   lt  body gt    This has 2 examples  you can use the one that fits best in your situation    use text-align center on the parent container  or create a container for this  if the container has to have a fixed size  use auto left and right margins to center it in the parent container    note that auto is used with single blocks to center them in the parent space by distrubuting the empty space to the left and right

User · Answer

lt style gt  form div       width  400px         border  1px solid black      form input type  submit          display  inline-block      width  70px     div submitWrapper       text-align  center             lt  style gt   lt form gt    lt div class  submitWrapper  gt       lt input type  submit  name  submit  value  Submit  gt     lt  div gt          Also Check this jsfiddle

User · Answer

I m assuming that the buttons are supposed to be next to each other on the same line  they should not each be centered using the  auto  margin  but placed inside a div with a defined width that has a margin  0 auto    CSS    centerbuttons     width 250px      margin 0 auto             HTML  after removing the margin properties from your buttons  CSS     lt div id  centerbuttons  gt        lt input value  Search  title  Search  type  submit  gt         lt input value  I m Feeling Lucky  title  I m Feeling Lucky  name  lucky  type  submit  gt   lt  div gt

User · Answer

Input elements are inline by default  Add display block to get the margins to apply  This will  however  break the buttons onto two separate lines  Use a wrapping  lt div gt  with text-align  center as suggested by others to get them on the same line

User · Answer

here is what works for me - set up as a class      button       text-align  center      display  block      margin  0 auto        you can set padding and width to whatever works best

User · Answer

I see a few answers here  most of them complicated or with some cons  additional divs  text-align doesn t work because of display  inline-block   I think this is the simplest and problem-free solution   HTML    lt table gt       lt  -- Rows -- gt       lt tr gt           lt td gt E-MAIL lt  td gt           lt td gt  lt input name  email  type  email    gt  lt  td gt       lt  tr gt       lt tr gt           lt td gt  lt  td gt           lt td gt  lt input type  submit  value  Register     gt  lt  td gt       lt  tr gt   lt  table gt    CSS   table input type  submit         display  block      margin  0 auto

[html] Center form submit buttons HTML / CSS

Examples related to html

Examples related to css

Examples related to center

Examples related to alignment