2016-05-12 130 views
1

我有一個footer和我在開始時將所有邊距和填充設置爲零。當我想將頁腳設置爲text-align: center時,my .footer p沒有任何更改。 但是填充仍然是水平的,而不是垂直的9px。爲什麼重寫不起作用?

.footer{ 
     background-image: url("../img/naviga.png"); 
     width: 1000px; 
     height: 30px; 
/* my div settings */ 
     background-repeat: repeat-y; 
     font-weight: bold; 
     text-align: center; 
/* my div settings */ 
     font-family: verdana, arial, sans-serif; 
     font-size: 10px; 
     } 

/* p tag is my footer text */ 
.footer p{ 
     padding: 9px auto 9px auto; 
     } 

[have a look plz][1] 
[1]: http://i.stack.imgur.com/D77IT.png */ 

爲什麼這個覆蓋不起作用?我也試過!important

+0

使用填充:9px汽車9px汽車重要的; ,「!important」property must @Chao LI –

+1

'auto'是'padding'的無效屬性。 – Chris

+0

您已將圖像中的選擇器剪掉。活頁面會更好。 –

回答

0

您不能這樣做padding: 9px auto,因爲autopadding的無效屬性。這就是爲什麼房產在您提供的圖片中排列整齊。

查看paddinghere的MDN文檔。

所有padding屬性可具有下列值:

length - 指定以像素,PT,cm的填充等

% - 指定的寬度的%的填充含元素

inherit - 指定填充應該從父元素繼承


下面是幾種垂直和水平對齊中間文本的方法之一。請檢查此fiddle或下面的代碼段。

.footer { 
 
    display: table; 
 
    background: red; 
 
    width: 1000px; 
 
    height: 30px; 
 
    background-repeat: repeat-y; 
 
    font-weight: bold; 
 
    text-align: center; 
 
    font-family: verdana, arial, sans-serif; 
 
    font-size: 10px; 
 
    } 
 
    .footer p { 
 
    display: table-cell; 
 
    vertical-align: middle; 
 
    }
<div class="footer"> 
 
    <p> 
 
    text 
 
    </p> 
 
</div>

+0

所以,根據你正確的文字答案,你爲什麼用'padding:auto'提供無效代碼? –

+0

@ Quasimodo'sclone,謝謝你指出。從OP複製代碼時,我忘了刪除它。 – Chris

1

你不能老是在填充使用自動。 嘗試它的CSS:

.footer p { padding: 9px 0px; }

,不要錯過你的頁腳高度設置爲30像素。你可以調整它的大小或p會走出.footer

檢查鏈接:https://jsfiddle.net/L5p38nc3/1/