1

关键是我已经设置了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'vertical-align属性不起作用？为什么？

我得到了一些关于设置line-height等于父级高度的建议，它仅在父级框中只有一行时才有效。

我怎样才能实现我的目标（也许我可以使用一些 css3 属性）？将内部元素设置在父垂直方向的中心

4

3 回答 3

2

您好，您可以通过下面提到的CSS代码实现您想要的结果：-

您可以给display:tabletheparent和display:table-cell; & vertical-align:middle; to theChild以获得您想要的结果，如下所述CSS & Demo 链接...

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/

于 2012-07-04T04:47:20.590 回答
0

您可能想深入研究显示等属性：表格、表格单元格、表格行。我相信那些是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/

于 2012-07-04T05:16:40.737 回答
0

CSS [工作小提琴]中的更改：

`   border: 1px solid black;
    height: 200px;
    margin: 50% auto;
    width: 200px;`
于 2012-07-04T03:40:45.223 回答