How to align an input tag to the center without specifying the width

Question

I have these HTML and CSS    x000D   x000D   siteInfo input type  button     x000D    background  none repeat scroll 0 0  66A3D2  x000D    border-color   FFFFFF  327CB5  327CB5  FFFFFF  x000D    border-radius  10px 10px 10px 10px  x000D    border-style  solid  x000D    border-width  1px  x000D    box-shadow  1px 1px 3px  333333  x000D    color   FFFFFF  x000D    cursor  pointer  x000D    font-weight  bold  x000D    padding  5px  x000D    text-align  center  x000D    text-shadow  1px 1px 1px  000000  x000D    x000D   lt div id  siteInfo  gt  x000D     lt p gt Some paragraph  lt  p gt  x000D     lt input type  button  value  Some Button  gt  x000D   lt  div gt  x000D   x000D   x000D    I d like the button to be aligned to the center  however  even with text-align  center in the CSS  is still on the left  I also don t want to specify the width since I d like it to change with the length of the text  How do I do that   I know the solution to this is simple but I can t find a proper way to do it  I would sometimes wrap it around a  lt p gt  tag that is center aligned but that s extra mark-up which I d like to avoid

User · Answer

You can use the following CSS for your input field:

.center-block {
  display: block;
  margin-right: auto;
  margin-left: auto;
}

Then,update your input field as following:

<input class="center-block" type="button" value="Some Button">

User · Answer

write this    siteInfo text-align center  p  input display inline-block    http   jsfiddle net XfSz6

User · Answer

you can put  in a table cell and then align the cell content    lt table gt      lt tr gt        lt td align  center  gt           lt input type  button  value  Some Button  gt        lt  td gt      lt  tr gt   lt  table gt

User · Answer

To have text-align center work you need to add that style to the  siteInfo div or wrap the input in a paragraph and add text-align center to the paragraph

User · Answer

You need to put the text-align center on the containing div  not on the input itself

User · Answer

You can also use the  tag  this works in divs and everything else    lt center gt  lt form gt  lt  form gt  lt  center gt    This link will help you with the tag   Why is the  lt center gt  tag deprecated in HTML

User · Answer

you can use this two simple line code    x000D   x000D      display  block      margin auto  x000D   x000D   x000D

[html] How to align an input tag to the center without specifying the width?

Examples related to html

Examples related to css