Solved

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

Posted on 2014-11-29
6
200 Views
Last Modified: 2014-12-29
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/
0
Comment
Question by:DrDamnit
  • 2
  • 2
6 Comments
 
LVL 45

Expert Comment

by:aikimark
ID: 40471986
use the vertical-align: bottom style

Reference:
http://www.w3schools.com/cssref/pr_pos_vertical-align.asp
0
 
LVL 42

Accepted Solution

by:
Rob Jurd, EE MVE earned 500 total points
ID: 40472097
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
 
LVL 58

Expert Comment

by:Gary
ID: 40521065
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
 
LVL 42

Expert Comment

by:Rob Jurd, EE MVE
ID: 40521066
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
 
LVL 45

Expert Comment

by:aikimark
ID: 40521077
@Rob
...both the author and I tried...
How would I or future readers know that?!?
0

Featured Post

How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

Join & Write a Comment

This article discusses how to create an extensible mechanism for linked drop downs.
Is your Office 365 signature not working the way you want it to? Are signature updates taking up too much of your time? Let's run through the most common problems that an IT administrator can encounter when dealing with Office 365 email signatures.
In this Micro Tutorial viewers will learn how to create a CSS image sprite (In a later tutorial, viewers will learn how to use CSS and HTML to create a navigation menu using this sprite) Open a new Photoshop document with a width of (Icon width)x(N…
In this tutorial viewers will learn how to embed Flash content in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <object> tag to embed Flash content.: To specify that the object is Flash content, d…

743 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

16 Experts available now in Live!

Get 1:1 Help Now