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

Question

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

这是我到目前为止所尝试的 - http://jsbin.com/adudih/1/edit

Answer 1

使用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 2

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

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

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

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

Answer 3

在这里查看，演示http://jsfiddle.net/yeyene/Ted2F/1/

对于pcss，使用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;
}