HTML and CSS: align text string to bottom center of div

Question

I would like to set a specific layout for my divs. These divs contain summaries (texts with a length of about 500 characters), and I would like that after the text at the bottom edge of my mailboxes there would be a line with the inscription "Link to additional information: link".

Here you can understand what I mean:

---

Here is some text blablablablablablablab lablablablablablablablablablablabla gfff further e blablablablablablablablablablablablabla blablablablablablablablablablablablabla further e FFFF blablablablablablablablablablab lablablablablablablablablablablablablablablablablab further 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, so I cannot use absolute positioning. It should be able to move if the window is resized.

Here is the css div

CSS

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: , Divs DOM ( ), XML. , -,

 "<div class="summarydiv"> summary from xml</div>

 <br>

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

Answer 1

divs, , -, :

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

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;
}

, , jsfiddle, !

Answer 2

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

50% . div.

Answer 3

<span>,

width: auto;
text-align: center;

Answer 4

You can also put the last line of htat in your own div and set the bottom field to zero with an important value.

Answer 5

If someone comes across this topic again, I often struggled with this concept and found a rather dynamic snippet that worked for me. Thus, you can always be below and in the center of a dynamically changing container! (large container)

.bigContainer{
  width: 450px;
  height:450px;
  background: blue;
}

.container{
  display: flex;
}

.container > h3{
  margin: auto auto 0 auto;
}

<div class="bigContainer">
            <div class="container">
              <h3>Super McAwesomePants</h3>
            </div>
        </div>

Run codeHide result