margin：0 auto;不适用于Firefox和Safari。在Google Chrome中工作

这是我的页面：http://inventikasolutions.com/demo/tatasky margin：0 auto;不适用于Firefox和Safari。在Google Chrome中工作

蓝色按钮以Google Chrome为中心显示，但在Safari和Firefox中显示为左侧。

我正在使用最新版本的浏览器。

我的CSS代码是：

.messi .btn { 
background-image: url(submit.png); 
background-repeat: no-repeat; 
background-size: auto; 
background-position: -1px -490px; 
background-color: #5B74A8; 
border-color: #29447E #29447E #1A356E; 
color: white; 
font-size: 15px; 
padding: 10px; 
-webkit-box-shadow: 0 1px 0 rgba(0, 0, 0, .1); 
border: 1px solid #999; 
vertical-align: middle; 
line-height: 20px; 
margin: 0 auto; 
display: block; 
} 

.messi-actions .btnbox .btn { 
min-width: 75px; 
}

感谢

来源

2013-03-14 Pritesh Desai

Firefox是渲染周围的BTN的div标签不同。所以它将它对齐到包装div标签的中心，但该标签只是按钮的宽度并且左对齐。收藏此得到它的工作：

.mesi-footbox { 
    text-align: center; 
}

这将居中DIV，如果它不呈现全宽，或把事情铬相同。

来源

2013-03-14 07:46:39

您的编辑适用于Firefox，但Safari仍然存在问题。 Safari也使用webkit，那为什么它不能正确地渲染布局呢？ Chrome浏览器正在按照它应有的方式渲染它。 – 2013-03-14 08:04:10

Safari在我看来很好... – 2013-03-14 08:43:49

@Pritesh Desai 尝试放入safari text-align：center;到包含您想要居中的div的容器div

来源

2017-01-06 18:56:22

margin：0 auto;不适用于Firefox和Safari。在Google Chrome中工作

回答

相关问题