Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

Tags:

html

css

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.

like image 549
catandmouse Avatar asked Feb 13 '12 17:02

catandmouse


People also ask

How do you align input tags?

HTML | <input> align Attribute left: It sets the alignment of image to the left. it is a default value. right: It sets the alignment of image to the right. middle: It sets the alignment of image to the middle.

How do you center a text box in input?

Not with a fixed width of the textbox:Wrap a div around with text-align: center; . Show activity on this post. In modern browsers that support CSS 3 you can do an easy centering using these three lines of code: position: absolute; left: 50%; transform: translateX(-50%);


1 Answers

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

like image 99
dotancohen Avatar answered Sep 19 '22 13:09

dotancohen