Center element in Safari Browser
10,685
Solution 1
Set width of submit button, for example:
#sbm_btn{
margin-left:auto;
margin-right:auto;
width:100px;
height:30px;
}
Solution 2
Button need to set a width:
#sbm_btn{
width: 200px;
margin-left:auto;
margin-right:auto;
}
if you don't set a width for btn, you will do like this:
#sbm_btn {
display:inline-block;
}
Other methods
Author by
reggie
Updated on June 04, 2022Comments
-
reggie almost 2 years
I have a simple page:
<!DOCTYPE html><html><head><title>Choose your Location - ChubbyParade.com</title> <style type="text/css"> #sv_btn_container{ display:block; text-align:center; margin:0px auto; } #sbm_btn{ margin-left:auto; margin-right:auto; } #location_selector{text-align:center;} </style> </head> <body> <div id="location_selector" style="width:300px;padding:1em;margin:0;border:1px solid #999999"> <form> <div>Please choose your location</div> <div id="selectors"> <div> <select name="country" style="padding:0.5em"> <option>Country</option> <!--etc.--> </select> </div> </div> <div style="clear:both"></div> <div id="sv_btn_container" style="margin-top:0.5em" align="center"> <input type="submit" id="sbm_btn" value=" SAVE " class="button" style="display:none" /> </div> </form> </div> </body></html>
I show the submit button dynamically with javascript by setting it's display style to 'block' (not shown in the above script).
I want the submit button to be centered.
But no matter what combination of auto-margins and text-align I've tried, the button will show on the left of its container.