如何将文本垂直居中在<p>标签中？

Question

我试图以＆lt; p＆gt;为中心在我的容器中标记，虽然我能够（使用top / translateY）技巧使标记本身居中，但文本的中心实际上并不是＆lt; p＆gt;的中心。标签的内容，如此处所示（红线是标签的正中间）：

如何将文本居中于＆lt; p＆gt;标签也是？

Answer 1

要将<p>标记置于其容器中心，请尝试使用表的属性。 比如，您必须将父容器的属性设置为display:table，然后将其子属性设置为display: table-cell;和vertical-align: middle;

Check this fiddle here

您的示例HTML应该是，

<div class="parent">
    <div class="child">
        <p>...... Your Text goes here .....</p>
    </div>
</div>

相对CSS应该是，

.parent {
    width: 300px;
    height: 200px;
    background: blue;
    padding: 30px;
    display: table;
}

.child {
    display: table-cell;
    vertical-align: middle;
}

p {
    display: block;
    text-align: center;
    color: #FFFFFF;
    margin: 0px;
}

For your reference check this out

Answer 2

您可以尝试这样：

p.myclass {
    font: bold 12px "Helvetica Neue", Helvetica, Arial, sans-serif;
    line-height: 10px;
    height:30px;
    margin: 0px;
    display: table-cell;
    vertical-align: middle;
    padding: 10px;
    bordeR: 1px solid #f00;
}

<p class="myclass">test</p>

Answer 3

你等中间的文字。在视觉上它似乎更少，因为你使用小写字母，而文本的高度是由大写计算。

Answer 4

<强> HTML：

public static final class JoinEntry implements BaseColumns {

    public static final String COLUMN_JOIN_NAME = "_name";
    public static final String COLUMN_JOIN_CLASS = "_class";
    public static final String COLUMN_JOIN_SUB_CLASS = "_sub_class";
    public static final String COLUMN_JOIN_NB_IND = "_ind_nb";
}

<强> CSS：

<div>
  <p>Hello World</p>
</div>

演示：https://jsfiddle.net/vv3uy7vy/

Answer 5

<p>Hi </p>

p{border:1px solid red; height:30px; line-height:30px;}

分配＆＃34;身高＆＃34;容器（这里是＆＃34; p＆＃34;标签）到行高将使内容垂直对齐