Question

我有footer并且我在开始时将所有边距和填充设置为零。当我想将我的页脚设置为text-align: center时，my .footer p没有任何变化。但是，填充仍然是水平0，而不是垂直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。

Answer 1

你不能在填充中使用auto。试试css：

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

并且不要错过你的页脚高度设置为30像素。您可以调整其大小，或p将.footer

检查链接：https://jsfiddle.net/L5p38nc3/1/

Answer 2

您无法padding: 9px auto，因为auto是padding的无效属性。这就是为什么在你提供的图片中列出财产的原因。

检查padding，here的MDN文档。

所有填充属性都可以包含以下值：

length - 以px，pt，cm等指定填充。

% - 指定包含元素宽度的百分比

inherit - 指定填充应该从父元素继承

这是在中间垂直和水平对齐文字的几种方法之一。请查看此fiddle或下面的代码段。

＆＃13;

  .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;
  }

＆＃13;

<div class="footer">
  <p>
    text
  </p>
</div>

＆＃13;

为什么覆盖不起作用？

2 个答案: