Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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>
like image 767
Tordah Avatar asked Jun 13 '14 14:06

Tordah


1 Answers

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!

like image 107
Shmoopy Avatar answered Sep 22 '22 11:09

Shmoopy