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

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_
<div id="siteInfo">_x000D_
  <p>Some paragraph.</p>_x000D_
  <input type="button" value="Some Button">_x000D_
</div>
_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 <p> tag that is center aligned but that's extra mark-up which I'd like to avoid.

This question is related to html css

The answer is


you can put in a table cell and then align the cell content.

<table>
   <tr>
     <td align="center">
        <input type="button" value="Some Button">
     </td>
   </tr>
</table>

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

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.


write this:

#siteInfo{text-align:center}
p, input{display:inline-block}

http://jsfiddle.net/XfSz6/


You can also use the tag, this works in divs and everything else:

<center><form></form></center>

This link will help you with the tag:

Why is the <center> tag deprecated in HTML?


you can use this two simple line code :

_x000D_
_x000D_
    display: block;
    margin:auto;
_x000D_
_x000D_
_x000D_