垂直对齐div中的文本 [英] Vertically align text in a div

问题描述

我试图找到最有效的方式来对齐文本与div。我尝试过几件事，似乎没有什么工作。

I am trying to find the most effective way to align text with a div. I have tried a few things and none seem to work.

.testimonialText
{
    position: absolute;
    left: 15px;
    top: 15px;
    width: 150px;
    height: 309px;
    vertical-align: middle;
    text-align: center;
    font-family: Georgia, "Times New Roman", Times, serif;
    font-style: italic;
    padding: 1em 0 1em 0;
}

推荐答案

CSS
elves http：/ /www.jakpsatweb.cz/css/css-vertical-center-solution.html

文章摘要：

对于CSS2浏览器，可以使用 display：table / display：table-cell

For CSS2 browser one can use display:table/display:table-cell to center content.

示例也可以在 JSFiddle 获取：

  <div style="display: table; height: 400px; overflow: hidden;">
     <div style="display: table-cell; vertical-align: middle;">
       <div>
         everything is vertically centered in modern IE8+ and others.
       </div>
     </div>
   </div>

可以使用<$ c将旧浏览器（IE6 / 7）的hacks合并为样式$ c>＃隐藏新浏览器的样式：

It is possible to merge hacks for old browser (IE6/7) into styles with using # to hide styles from newer browsers:

<div style="display: table; height: 400px; #position: relative; overflow: hidden;">
  <div style=
    " #position: absolute; #top: 50%;display: table-cell; vertical-align: middle;">
    <div style=" #position: relative; #top: -50%">
     everything is vertically centered
    </div>
  </div>
</div>

这篇关于垂直对齐div中的文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！