Safari 浏览器中的中心元素答案

【问题标题】：Center element in Safari BrowserSafari 浏览器中的中心元素
【发布时间】：2023-03-11 21:34:01
【问题描述】：

我有一个简单的页面：

<!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>

我通过将其显示样式设置为“块”（在上面的脚本中未显示），使用 javascript 动态显示提交按钮。

我希望提交按钮居中。

但无论我尝试了哪种自动边距和文本对齐组合，按钮都会显示在其容器的左侧。

【问题讨论】：

在这里工作正常 - jsfiddle.net/r9ffF。你能提供一个不工作的jsFiddle吗？（并包括 javascript）

标签： html css safari center centering

【解决方案1】：

按钮需要设置宽度：

#sbm_btn{
    width: 200px;
    margin-left:auto;
    margin-right:auto;
}

如果你不为 btn 设置宽度，你会这样做：

#sbm_btn {
   display:inline-block;
}

其他methods

【讨论】：

该死！这让我在 Safari 上绊倒了。 inline-block 解决了这个问题。谢谢！

【解决方案2】：

设置提交按钮的宽度，例如：

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

}

【讨论】：