54

I have these HTML and CSS:

#siteInfo input[type="button"] {
  background: none repeat scroll 0 0 #66A3D2;
  border-color: #FFFFFF #327CB5 #327CB5 #FFFFFF;
  border-radius: 10px 10px 10px 10px;
  border-style: solid;
  border-width: 1px;
  box-shadow: 1px 1px 3px #333333;
  color: #FFFFFF;
  cursor: pointer;
  font-weight: bold;
  padding: 5px;
  text-align: center;
  text-shadow: 1px 1px 1px #000000;
}
<div id="siteInfo">
  <p>Some paragraph.</p>
  <input type="button" value="Some Button">
</div>

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.

YakovL
  • 7,557
  • 12
  • 62
  • 102
catandmouse
  • 11,309
  • 23
  • 92
  • 150

8 Answers8

97

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

dotancohen
  • 30,064
  • 36
  • 138
  • 197
  • 1
    This worked thanks. I'm just wondering why such is the case? Is it because input is an inline element and not a block element like

    ? If I put center align on

    tag itself, it works fine. Just wondering why I can't do the same for .

     – catandmouse Feb 14 '12 at 13:31
  • 3
    It is because the `center` attribute affects what is inside the element on which it is declared. That is, everything between `

    ` and `

    `, and also everything between `` and ``, which is likely nothing as you have abbreviated it to `` or even ``.     – dotancohen Feb 14 '12 at 14:56
  • this seems to conflict with `display:inline-flex`, where it stops working – Michael May 03 '17 at 17:54
25

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">
Ayan
  • 8,192
  • 4
  • 46
  • 51
13

write this:

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

http://jsfiddle.net/XfSz6/

sandeep
  • 91,313
  • 23
  • 137
  • 155
  • 1
    This is an important step. If the display is just "block", it won't center, even if "text-align: center" is set on an outer container. – stormont Mar 02 '19 at 17:45
5

you can use this two simple line code :

    display: block;
    margin:auto;
simon
  • 621
  • 1
  • 6
  • 14
0

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>
Hadi
  • 17
  • 1
0

This worked for me:

<div align="center">
  <input type="button" value="Some Button">
</div>
PyCodr
  • 1
  • 1
    Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Apr 19 '23 at 13:24
0

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.

Jared
  • 12,406
  • 1
  • 35
  • 39
-8

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?

Community
  • 1
  • 1
sralse
  • 5
  • 2