HTML & CSS: Align text line to bottom center of div

Question

I would like to set a specific layout for my divs. These divs contain summaries (texts about 500 chars long) and I would like that after the text, on the bottom edge of my boxes, to have a line containing something like Link to additional information : *link*.

Here's an ascii layout-art for you guys to understand what I mean:

---

Here is some text blablablablablablablab lablablablablablablablablablablabla gfff ff f blablablablablablablablablablablablabla blablablablablablablablablablablablabla ff f ffff blablablablablablablablablablab lablablablablablablablablablablablablablablablablab ff lablablablablablablablablablablablablab lablablablablablablablablabla blablablablablabla blablablablablabla blablablablablablablabla blablablablablablablabla blablablablablablablabla

               Link to additional information here : *link*.

---

I want the last line to be centered. My layout uses percentage, therefore I cannot use absolute positioning. It should be able to move if the window gets resized.

Here is the CSS of the div:

float: left;
width: 91.5%;
min-width: 825px;
height: 120px;
text-align: left;
z-index: 1;
border:solid 1px #19365D;
background-image:url('images/NiceBackgroundDude.png');
background-repeat:repeat-x;
margin-left:3.7%;
margin-right:3.7%;
padding-left:0.5%;
padding-right:0.5%;

---

EDIT: If forgot to tell, those Divs are DOM elements (aka they are generated everytime the page is loaded) and the link is in a separate tag in the XML file. therefore, if there is something I could do like:

<div class="summarydiv"> summary from xml</div><br>
<div class="centerlink">link line and link from xml</div>

Solution 1

I really like divs because you never know when you may want to style blocks differently, so this is how I would do it:

<div class="parent">
   <div>Here is some text........</div>
   <div class="link"><a href="#">Link to additional information</a></div>
</div>

And the CSS:

.parent {
    position:relative;
    float: left;
    width: 91.5%;
    min-width: 825px;
    height: 120px;
    text-align: left;
    z-index: 1;
    border:solid 1px #19365D;
    background-image:url('images/NiceBackgroundDude.png');
    background-repeat:repeat-x;
    margin-left:3.7%;
    margin-right:3.7%;
    padding-left:0.5%;
    padding-right:0.5%;
}

.link {
    position:absolute;
    width:100%;
    bottom:0;
    text-align:center;
}

and finally a jsfiddle showing it in action!

Solution 2

You could play a bit with position and margins

position:absolute;
bottom:0;
left:50%;
margin-left: -50%;

positioning at left 50% will start from the vertical axis of your container. Negative margin to the left will center the inner div.

Solution 3

Insert the last line into an <span> element, set the element style to

width: auto;
text-align: center;

that should do the job

Solution 4

You can also put htat last line in its own div & set the bottom margin to zero with an !important.

View more solutions