<p>的valign = center的等价于css

Question

我的页面上有以下代码:

<p align="justify" 
   style="font-size:10pt;display:block;height:200px;vertical-align:middle;"> 
  Content
</p> 

我希望文本在p标签的中心垂直对齐

使用vertical-align:middle似乎不起作用.

有没有办法做到这一点？

Answer 1

这是一个避免使用<table>标签的解决方案.

它适用于Internet Explorer 8和9,Chrome,Firefox和Safari(但不是IE7,但上次我检查它们在全球的市场份额约为2%).

首先,摆脱试图在段落标记中尝试垂直对齐文本的概念 - 而不是考虑在容器中对齐段落.

使用标记......

<div class="container">
    <p>The text that you'd wish to have vertically aligned in the middle of the
       container...which might be like an article column, or whatever</p>
</div>

和CSS

.container{
     border: 1px solid red; /*to see the example*/
     display: table-cell;
     height: /* insert whatever height you want*/;
     vertical-align: middle;
 }

这将使段落垂直对齐,使其位于容器元素的垂直中心.

现在一个非常有趣的解决方案是当你有一个父容器,里面装满了你想让所有孩子并排放置并且完全垂直对齐到中间的内容.

当然,如果您希望父容器具有特定大小,则使用此版本:

标记:

<div class="containerTwo">
     <p>here's some text and stuffs, make this whatever the heck 
     you want it to be</p>
     <p>these can be any height and, really any element, the magic
     is in the display property of the elements so this still 
     looks pretty semantic</p>
     <p>more stuff and this could be like an image or something</p>
</div>

CSS:

.containerTwo{
     border: 1px solid green; /* for sake of the example */
     display: table-cell;
     height: /* what you want it to be */;
     vertical-align: middle;
}
.containerTwo p{
     border: 1px solid blue; /* for sake of example */
     display: inline-block;
     width: 30%; /* all of the child elems shouldn't go over 100% */
     vertical-align: middle;
}

这将生成一个父元素,可以选择任何高度,其中所有子元素都在中间完美对齐.display: table-cell如果你有一堆不同的高度元素,你们都希望在中间彼此对齐,并且你不想为父元素指定高度但只是想要一个甚至不需要的COOLER解决方案它伸展到最大的子元素的高度:(哦,这适用于IE7)

标记:

<div class="containerThree">
    <p>this is more text that you might want to have 
       vertically aligned in the middle with the others</p>
    <p>so here's a sibling paragraph you might want to 
       have aligned next to the other.</p>
    <div title="a really big element!"></div>
    <p>like the last one, the width can't add up to more
       than 100% of the parent element, otherwise they just
       wrap.  But atleast no table-cell!</p>
</div>

CSS:

.containerThree{
     border: 1px solid purple; /* for the example */
     /* and that's it!!! */
}

.containerThree p, .containerThree div{
     border: 1px solid blue;
     width: 20%; /* can't add beyond total width of parent */
     display: inline-block;
     *display: inline; /* ie7 hack */
     zoom: 1; /* ie7 hack */
     vertical-align: middle;

}

.containerThree div{  /* to simulate a big element */
     height: 400px; 
}

对于这个,一切都将垂直对齐.

这是一个关于js小提琴的例子,你可以看到:

http://jsfiddle.net/NJqMp/1/

Answer 2

如果您只有适合一行的内容,则可以使用将行高设置为元素高度的解决方法

line-height:200px;

Answer 3

最简单的方法是将其包装在表格中，如下所示：

<table><tr><td style='vertical-align: middle; height:200px;'>
  <p align="justify" style="font-size:10pt;display:block;"> 
    Content
  </p> 
</td></tr></table>

哦，align="justify"应该移动到 CSS 中，作为text-align: justify