Safari 浏览器中的中心元素
Posted
技术标签:
【中文标题】Safari 浏览器中的中心元素【英文标题】：Center element in Safari Browser 【发布时间】：2013-06-04 13:48:33 【问题描述】：我有一个简单的页面：
<!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_selectortext-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） 【参考方案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;
【讨论】：
以上是关于Safari 浏览器中的中心元素的主要内容，如果未能解决你的问题，请参考以下文章
适用于 chrome、firefox 和 safari 浏览器的 Azure 浏览器推送通知
iOS safari浏览器上overflow: scroll元素无法滚动bug深究