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;
    }

<div class="testimonialText"> 
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>

---

Vertical Centering in CSS
http://www.jakpsatweb.cz/css/css-vertical-center-solution.html

Article summary:

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

Sample also available at 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>

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>

---

You need to add the line-height attribute and that attribute must match the height of the div . In your case:

height: 309px;
line-height: 309px;

In fact, you could probably remove the height attribute altogether.

This only works for one line of text though, so be careful.

---

Update - Here's a great resource

http://howtocenterincss.com/

Centering in CSS is a pain in the ass. There seems to be a gazillion ways to do it, depending on a variety of factors. This consolidates them and gives you the code you need for each situation.

Update - Using Flexbox

Inline with keeping this post up to date with the latest tech, here's a much easier way to center something using flexbox. Flexbox isn't supported in IE9 and lower .

Here's some great resources:

A guide to flexbox

Centering elements with flexbox

IE10 syntax for flexbox

Support for Flexbox

jsfiddle with browser prefixes

HTML

<ul>
    <li>
        <p>Some Text</p>
    </li>
    <li>
        <p>A bit more text that goes on 2 lines</p>
    </li>
    <li>
        <p>Even more text that demonstrates how lines can span multiple lines</p>
    </li>
</ul>

CSS

li {
    display: flex;
    justify-content:center;
    align-content:center;
    flex-direction:column; /* column | row */
}

Update - Another solution

This is from zerosixthree and lets you center anything with 6 lines of css

This method isn't supported in IE8 and lower

jsfiddle

HTML

<ul>
    <li>
        <p>Some Text</p>
    </li>
    <li>
        <p>A bit more text that goes on 2 lines</p>
    </li>
    <li>
        <p>Even more text that demonstrates how lines can span multiple lines</p>
    </li>
</ul>

CSS

p {
    text-align: center;
    position: relative;
    top: 50%;
    -ms-transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
}

Previous answer

Simple and cross browser approach, useful as links in the marked answer are slightly outdated.

How to vertically and horizontally center text in both an unordered list and a div without resorting to JavaScript or css line heights . No matter how much text you have you won't have to apply any special classes to specific lists or divs (the code is the same for each). This works on all major browsers including IE9, IE8, IE7, IE6, Firefox, Chrome, Opera and Safari. There are 2 special stylesheets (1 for IE7 and another for IE6) to help them along due to their css limitations which modern browsers don't have.

Andy Howard - How to vertically and horizontally center text in an unordered list or div

Edit: As I didn't care much for IE7/6 for the last project I worked on, I used a slightly stripped down version (ie removed the stuff that made it work in IE7 and 6). Might be useful for somebody else...

jsfiddle

HTML

<ul>
    <li>
        <div class="outerContainer">
          <div class="innerContainer">
            <div class="element">
                <p><!-- Content --></p>
            </div>
          </div>
        </div>
    </li>
    <li>
        <div class="outerContainer">
          <div class="innerContainer">
            <div class="element">
                <p><!-- Content --></p>
            </div>
          </div>
        </div>
    </li>
</ul>

And the CSS:

.outerContainer {
    display: table;
    width: 100px; /* width of parent */
    height: 100px; /* height of parent */
    overflow: hidden;
}
.outerContainer .innerContainer {
    display: table-cell;
    vertical-align: middle;
    width: 100%;
    margin: 0 auto;
    text-align: center;
}
li {
    background: #ddd;
    width: 100px;
    height: 100px;
}

链接地址: http://www.djcxy.com/p/7140.html

上一篇: 垂直对齐复选框/标签对

下一篇: 如何垂直对齐div中的文本？