我的DIV不會HTML中心CSS

我的代碼我的DIV不會HTML中心CSS

.nav_bar { 
 
\t position: absolute; 
 
\t top: 0; 
 
\t width: 800px; 
 
\t height: 23px; 
 
\t display: inline-block; 
 
\t text-align: center; 
 
\t background-color: #0090bc; 
 
\t border-bottom-left-radius: 12px; 
 
\t border-bottom-right-radius: 12px; 
 
\t border: 2px solid #004D6F; 
 
\t -webkit-box-shadow: inset 2px 2px 0px rgba(255, 255, 255, 0.7), inset -2px -2px 0px rgba(0, 0, 0, 0.7); 
 
\t box-shadow: inset 2px 2px 0px rgba(255, 255, 255, 0.7), inset -2px -2px 0px rgba(0, 0, 0, 0.4); 
 
\t padding: 10px; 
 
\t font-family: arial; 
 
\t color: white; 
 
}

<center> 
 
\t <div class="nav_bar"> 
 
\t \t <center><font size="5"><span class="shadow"><b>Text</b></span></font></center> 
 
\t </div> 
 
</center>

的 '.nav_bar' DIV不會居中出於某種原因！這是輸出！我已經添加了中心的標籤，看它是否會中心，但它wont't有人可以幫我

輸出： enter image description here

來源

2015-06-01 user3575600

您的位置：絕對的。這意味着你正在明確地定位它。它永遠不會以此爲中心。 – Lance

也'中心'和'字體'是不推薦使用的元素，不應再使用。 –

@Lance你實際上可以以絕對位置爲中心......但這是一個不好的做法:)。恩。位置：絕對;剩下：50％; margin-left：-400px;寬度：800px; – zozo

刪除

position:absolute; 
top: 0;

添加

margin: 0 auto;

這是一個jsfiddle：

請注意，我將寬度更改爲100px，以便它適合窗口。

來源

2015-06-01 16:04:17 Lance

如果你想保持position: absolute您可以將這些樣式添加到.nav_bar使其居中：

left: 50%; 
-webkit-transform: translateX(-50%); 
-moz-transform: translateX(-50%); 
transform: translateX(-50%);

來源

2015-06-01 16:11:20

-1

添加對齊：中心在你的CSS類。

align:center ;

它會爲你工作

來源

2015-06-01 16:17:18

我的DIV不會HTML中心CSS

回答

相關問題