Question

关键是我设置了vertical-align: center属性

我有p：

<p><span>Hello World</span></p>

p{
    text-align:center;
    height:200px;
    width:200px;
    border:1px black solid;
}
span{
    vertical-align: middle;
    display:inline-block;
}

以下是演示：http://jsfiddle.net/hh54188/yhLqV/2/

我希望段落中的文字可以在垂直和水平方向都居中

但是span的{{1}}属性不起作用？为什么？

我得到一些关于设置vertical-align等于父级高度的建议，它只适用于父框中只有一行。

我如何实现我的目标（可能我可以使用一些css3属性）？将内部元素设置为父级垂直方向的中心

Answer 1

您好，您可以通过下面提到的 CSS 代码获得所需的结果： -

您可以将display:table parent display:table-cell; & vertical-align:middle;提供给Child，而不是获得所需的结果，如下所示 CSS < / strong>＆amp; 演示链接...

<强> CSS

p{ text-align:center; height:200px; width:200px; border:1px black solid; display:table; } span{ vertical-align: middle; display:table-cell; }

这是演示： - http://jsfiddle.net/yhLqV/5/

Answer 2

CSS [Working fiddle]的变化：

`   border: 1px solid black;
    height: 200px;
    margin: 50% auto;
    width: 200px;`

Answer 3

您可能想深入了解display：table，table-cell，table-row等属性。我相信那些是ie8及以上。所以你可以模仿你的html组织的表行为。

html是一样的......

css将是

p{
    text-align:center;
    height:200px;
    width:200px;
    border:1px black solid;
    display:table;
}
span{
    vertical-align: middle;
    display:table-cell;
}

小提琴：http://jsfiddle.net/yhLqV/6/

CSS：如何在垂直方向的块元素中心设置文本

3 个答案: