爲什麼重寫不起作用？

我有一個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。

來源

2016-05-12 Chao LI

使用填充：9px汽車9px汽車重要的; ，「！important」property must @Chao LI –

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

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

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

查看padding，here的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>

來源

2016-05-12 06:42:51 Chris

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

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

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

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

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

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

來源

2016-05-12 06:56:13 Harry

爲什麼重寫不起作用？

回答

相關問題