CODEWITHSUNDEEP
htmlcss
suonpera
suonpera

Reputation: 225

text in footer won't align to bottom center

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>
					<a href="#"><i class="fa fa-envelope fa-2x" aria-hidden="true"></i></a>	
					<a href="#"><i class="fa fa-linkedin-square fa-2x" aria-hidden="true"></i			></a>		
				</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>

Upvotes: 1

Views: 5695

Answers (5)

Chris
Chris

Reputation: 59501

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>
          <a href="#"><i class="fa fa-envelope fa-2x" aria-hidden="true"></i></a>
          <a href="#"><i class="fa fa-linkedin-square fa-2x" aria-hidden="true"></i			></a>
        </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>

Upvotes: 1

Pawan Kotak
Pawan Kotak

Reputation: 300

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>
						<a href="#"><i class="fa fa-envelope fa-2x" aria-hidden="true"></i></a>	
						<a href="#"><i class="fa fa-linkedin-square fa-2x" aria-hidden="true"></i			></a>		
					</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>

Upvotes: 0

Karthick Nagarajan
Karthick Nagarajan

Reputation: 1345

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.

Upvotes: 0

Mukesh Parmar
Mukesh Parmar

Reputation: 123

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...

Upvotes: 0

fizzi
fizzi

Reputation: 116

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...

Upvotes: 1

Related Questions