页脚中的文本填充顶部

Question

我不确定这里的问题是什么，因为这似乎是一个非常简单的情况，但我不能让它发挥作用。所以我只是想垂直地操纵我的页脚中的内容的位置，但它始终坚持它的顶部。填充，保证金，没有任何帮助...为什么不呢？

.footer{
	background-color: #333;
	height: 50px;
	text-align: center;
}

.imprint p{
	color: #fff;
	padding: 50 px;
}

    <footer class="footer">
      <div class="imprint">
       <p>&copy; 2017 Bike Berlin</p>
       </div>
    </footer>

Answer 1

您无需添加高度并删除50和px之间的空间

.footer{
	background-color: #333;
	text-align: center;
}

.imprint p{
	color: #fff;
	padding: 15px;
}

    <footer class="footer">
      <div class="imprint">
       <p>&copy; 2017 Bike Berlin</p>
       </div>
    </footer>

Answer 2

如果页脚只有一行，则可以使用line-height: 50px。 它会使行高达到页脚的高度，因此文本将位于中间。

＆＃13;

＆＃13;

.footer {
  background-color: #333;
  text-align: center;
  line-height: 50px;
}

.imprint p {
  color: #fff;
}

＆＃13;

<footer class="footer">
  <div class="imprint">
    <p>&copy; 2017 Bike Berlin</p>
  </div>
</footer>

＆＃13;

＆＃13;

＆＃13;

Answer 3

在引用页脚时不要使用footer标记。你有课程来调整它。这是正常行为（至少在浏览器实现中）。保证金不会影响孩子相对于其父母的位置，除非父母有填充，在这种情况下，大多数浏览器会将孩子的边距添加到父母的填充中。 尝试使用它，它可能有效：

.footer{
background-color: #333;
height: 50px;
text-align: center;

}

.imprint p{
 color: #fff;
 padding-top:15px;
}

将页脚更改为div：

<div class="footer">
  <div class="imprint">
   <p class="para">&copy; 2017 Bike Berlin</p>
   </div>
</div>

Answer 4

删除height媒体资源，然后使用padding代替.imprint p。您只需在容器的顶部和底部边缘添加等量的空间

Answer 5

只需将填充值更改为15px，它就可以解决您的问题。

.footer{
    background-color: #333;
    height: 50px;
    text-align: center;
      }
.imprint p{
    color: #fff;
    padding: 15px;
  }