Dowemo
0 0 0 0


Question:

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>


Best Answer:


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:

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 (i.e. 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;
}



Copyright © 2011 Dowemo All rights reserved.    Creative Commons   AboutUs