text in footer won't align to bottom center - html

Question

As the title suggests I'm trying to align my text in my footer to be horizontally center and aligned to the bottom.
Having read other's solutions, I've tried to set the parent div to relative, the p element to absolute, and then bottom: 0;/vertical-align: bottom; But doesn't work.
What happens is that the text moves up into the above div and is no longer horizontally centered.
/*Section3*/
#section3 {
height: 50%;
background: #6ed3cf;
text-align: center;
padding: 0 0 0.5em;
height: 20em;
}
#section3 h2 {
font-size: 2em;
font-weight: 200;
}
#section3 i {
padding: 0.5em;
color: black;
}
/*Footer*/
#footer {
background:#fff;
color: black;
height: 10%;
font-family: 'Open Sans', sans-serif;
position: relative;
display: table;
}
#footer p {
font-size: 0.7em;
text-align: center;
position: absolute;
bottom: 0;
vertical-align: bottom;
}
<div id="section3" style="display:flex;justify-content:center;align-items:center;">
<div>
<h2>header</h2>
<div class="container">
<div class="row">
<div class="col-md-6 col-md-offset-3">
<p>blablablablablablablablablablablablablablablablablablablablabla</p>
<i class="fa fa-envelope fa-2x" aria-hidden="true"></i>
<i class="fa fa-linkedin-square fa-2x" aria-hidden="true"></i >
</div>
</div>
</div>
</div>
</div>
<!-- Footer -->
<div id="footer">
<div class="container">
<div class="row">
<div class="col-md-4 col-md-offset-4">
<p>text</p>
</div>
</div>
</div>
</div>

Answer 1

I'm a bit confused about certain properties on your components, but here's what I would do:
Remove position: absolute on your <p> element, and remove the display: table from your <footer>.
Like so:
html {
height: 100%;
box-sizing: border-box;
}
body {
position: relative;
margin: 0;
min-height: 100%;
}
/*Section3*/
#section3 {
height: 50%;
background: #6ed3cf;
text-align: center;
padding: 0 0 0.5em;
height: 20em;
}
#section3 h2 {
font-size: 2em;
font-weight: 200;
}
#section3 i {
padding: 0.5em;
color: black;
}
/*Footer*/
#footer {
background: #fff;
color: black;
height: 10%;
font-family: 'Open Sans', sans-serif;
position: absolute;
width: 100%;
bottom: 0;
}
#footer div {
height: 100%;
}
#footer .row > div {
width: 100%;
display: table;
}
#footer p {
display: table-cell;
font-size: 0.7em;
text-align: center;
bottom: 0;
vertical-align: bottom;
}
<div id="section3" style="display:flex;justify-content:center;align-items:center;">
<div>
<h2>header</h2>
<div class="container">
<div class="row">
<div class="col-md-6 col-md-offset-3">
<p>blablablablablablablablablablablablablablablablablablablablabla</p>
<i class="fa fa-envelope fa-2x" aria-hidden="true"></i>
<i class="fa fa-linkedin-square fa-2x" aria-hidden="true"></i >
</div>
</div>
</div>
</div>
</div>
<!-- Footer -->
<div id="footer">
<div class="container">
<div class="row">
<div class="col-md-4 col-md-offset-4">
<p>text</p>
</div>
</div>
</div>
</div>

Answer 2

It worked for me when i gave width:100%; to my footer property. if you do that then the text aligns itself to middle. PS, my reputation doesnt allow me to add a comment...

Answer 3

Please add width style for P element of #footer as following :
#footer p {
font-size: 0.7em;
text-align: center;
position: absolute;
bottom: 0;
vertical-align: bottom;
width:100%; /* added new style */
}
If you have any issue please let me know.
Thanks...

Answer 4

You just try this.
#footer {
background:#fff;
color: black;
height: 10%;
font-family: 'Open Sans', sans-serif;
position: relative;
display: table;
width: 100%;
text-align: center;
}
This is worked for me.

Answer 5

See if this solve your purpose
#section3 {
height: 50%;
background: #6ed3cf;
text-align: center;
padding: 0 0 0.5em;
height: 20em;
}
#section3 h2 {
font-size: 2em;
font-weight: 200;
}
#section3 i {
padding: 0.5em;
color: black;
}
/*Footer*/
#footer {
/* background: #fff; */
/* color: black; */
/* height: 10%; */
/* font-family: 'Open Sans', sans-serif; */
/* position: relative; */
/* display: table; */
background: #6ed3cf;
}
#footer p {
font-size: 0.7em;
text-align: center;
/* position: absolute; */
/* bottom: 0; */
/* vertical-align: bottom; */
margin-top: 0px;
}
<div id="section3" style="display:flex;justify-content:center;align-items:center;">
<div>
<h2>header</h2>
<div class="container">
<div class="row">
<div class="col-md-6 col-md-offset-3">
<p>blablablablablablablablablablablablablablablablablablablablabla</p>
<i class="fa fa-envelope fa-2x" aria-hidden="true"></i>
<i class="fa fa-linkedin-square fa-2x" aria-hidden="true"></i >
</div>
</div>
</div>
</div>
</div>
<!-- Footer -->
<div id="footer">
<div class="container">
<div class="row">
<div class="col-md-4 col-md-offset-4">
<p>text</p>
</div>
</div>
</div>
</div>