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中工作

回答

相關問題