Menu
I'm having troubles centering my HTML form submit buttons in CSS.
Right now I'm using:
<input value="Search" title="Search" type="submit" id="btn_s"> <input value="I'm Feeling Lucky" title="I'm Feeling Lucky" name="lucky" type="submit" id="btn_i"> 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?
410
You can center a block level element by setting margin-left and margin-right to auto . We can use the shorthand margin: 0 auto to do this. (This also sets margin-top and margin-bottom to zero.)
Use the CSS text-align Property to Center a Form in HTML We can set the value to center to center the form. For example, apply the text-align property to the form tag in the style attribute, and set the property to center . Next, create input tags with the type text and then submit .
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.
Steps to move the Submit buttonFigure out the coordinates where you'd like the new Submit button to go. The Submit button on Wufoo forms all have the same ID – 'saveForm. ' With the custom CSS file, change the position of the button, using the new coordinates. Attach the custom CSS file to your theme.
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.
<div class="buttonHolder"> <input value="Search" title="Search" type="submit" id="btn_s"> <input value="I'm Feeling Lucky" title="I'm Feeling Lucky" name="lucky" type="submit" id="btn_i"> </div> .buttonHolder{ text-align: center; } If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
