与容器中的段落垂直居中对齐。

Question

朋友们，这是我面临的一个非常简单的问题。我有一个名为“testDiv”的容器，在容器内有一段要测试。问题是当我定位到段落（ .testDiv p ）并分配 margin-top: 75px; 时，它也会影响容器。所以，这就是我想要的。我只想下移段落而不是容器。不使用段落的绝对位置是否有任何可能性。

这是我迄今为止尝试过的 - http://jsbin.com/adudih/1/edit

Answer 1

查看这里，DEMO http://jsfiddle.net/yeyene/Ted2F/1/

对于p css，使用float & margin-top 而不是line-height

在 p 页边距顶部播放并查看。

.testDiv {
    width: 200px;
    height: 300px;
    background-color: blue;
    text-align: center;
    position: relative;
}
.testDiv p {
    float:left;
    background:green;
    margin-top: 130px;
    color: white;
}

Answer 2

使用padding-top 代替margin-top。所以应该是

.testDiv p {
  display: block;
  padding-top: 75px;
  color: white;
}

更新： 它影响容器的原因是因为您分配了这样的样式.testDiv p。它将首先引用.testDiv，然后仅引用p。另一种方法是，您可以通过为其分配类名来设置段落样式并设置边距。

<div class='testDiv'>
    <p class="p-style">Some text to play around.</p>
</div>

.p-style{
    margin-top: 75px;
}

Answer 3

您有多种方法可以做到这一点：

1. 使用padding-top 而不是margin-top： http://jsbin.com/etazem/2/edit

2. 在段落标签上使用line-height，并将其设置为与容器相同的高度：（使用此方法您将遇到text-wrapping 如果文本超出容器宽度）： http://jsbin.com/etazem/1/edit

填充与边距： http://www.impressivewebs.com/difference-between-margins-padding-css/