CODEWITHSUNDEEP
htmlcsssafaricentercentering
reggie
reggie

Reputation: 3674

Center element in Safari Browser

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.

Upvotes: 2

Views: 11479

Answers (3)

n1cK
n1cK

Reputation: 368

A more flexible solution without hardcoding pixels:

#mySafariCenteredElement {
    margin:auto;
    display: flex; 
    width: -webkit-fill-available
}

Try adding position: relative if necessary.

Upvotes: 0

Airen
Airen

Reputation: 2169

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

Upvotes: 3

sinisake
sinisake

Reputation: 11328

Set width of submit button, for example:

#sbm_btn{
margin-left:auto;
margin-right:auto;
width:100px;
height:30px;

}

Upvotes: 2

Related Questions