What's the CSS to align text of a DIV to the bottom center?

I have a bootstrap based row / column system. One row is labels for a progress bar. The second row will be the glyphicon map pointer (the pointer is NOT included in this question).

How do I align this text to the bottom of the div?

Screenshot
(The red column outlines are there to show the columns. I added the arrows to show which ones need to be moved down...

Here's the fiddle... but it doesn't exactly work as the screenshot since (at least on this monitor) the result section is a little narrow....

http://jsfiddle.net/d388t1oL/
LVL 32
DrDamnitAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

aikimarkCommented:
use the vertical-align: bottom style

Reference:
http://www.w3schools.com/cssref/pr_pos_vertical-align.asp
0
RobOwner (Aidellio)Commented:
You can do it by wrapping the inner content with a tag like the <label> one you have for start, before making the containing element have the postition of relative.  The inner tags then can have the absolute positioning assigned and it's easily put to the bottom of the container.

demo here: http://jsfiddle.net/d388t1oL/6/embedded/result/ (from http://jsfiddle.net/d388t1oL/6/)

#progress .progressMarker {
height: 85px;
text-align: center;
position: relative;
}

#progress .progressMarker * {
position: absolute;
bottom: 0px;
}

Open in new window

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
GaryCommented:
I've requested that this question be closed as follows:

Accepted answer: 250 points for aikimark's comment #a40471986
Assisted answer: 250 points for Rob Jurd's comment #a40472097

for the following reason:

This question has been classified as abandoned and is closed as part of the Cleanup Program. See the recommendation for more details.
0
RobOwner (Aidellio)Commented:
Don't like to object, however both the author and I tried the vertical-align property with no success because the elements are floating, which changes their dimensional properties.  Hence the need for absolute positioning within the element.

I believe my answer is the only correct one.
0
aikimarkCommented:
@Rob
...both the author and I tried...
How would I or future readers know that?!?
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.