CODEWITHSUNDEEP
htmlcss
Diogo Neiss
Diogo Neiss

Reputation: 117

Can't center text on css <div> footer

I'm trying to add centralized text on a footer, but the text always stays on the left, even after setting the margin to auto, and text-align: center. Can anyone figure out what's missing?

.footer {
  position: absolute;
  margin: 100px auto 0;
  background-color: #393e46;
  height: 15%;
  top: 360%;
  padding: 16px 16px 0 16px;
  left: 0;
  right: 0;
}

.hyperlink {
  color: #cdffeb;
  position: relative;
  text-align: center;
  right: 0;
  left: 0;
  bottom: 0;
  top: 0;
  margin: auto;
  font-size: 2em;
}
<div class="footer">
<a class="hyperlink" href="https://www.linkedin.com/in/diogo-neiss-501001165/">LinkedIn</a>
<a class="hyperlink" href="https://github.com/diogoneiss">Git Hub</a>
</div>

Upvotes: 0

Views: 720

Answers (5)

Koen
Koen

Reputation: 140

You would like to get text aligned in the center of the footer div. You can place the text-align on the footer div

Upvotes: 0

Victoria Le
Victoria Le

Reputation: 940

Consider using flex, easy and clean to manage. Simply set the flex-direction to column and align the items in the flex box to center.

.footer {
  background-color: grey;
  padding: 15px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.hyperlink {
  color: tomato;
  font-size: 2rem;
}
<div class="footer">
<a class="hyperlink" href="https://www.linkedin.com/in/diogo-neiss-501001165/">LinkedIn</a>
<a class="hyperlink" href="https://github.com/diogoneiss">Git Hub</a>
</div>

Upvotes: 0

Ikram Ud Daula
Ikram Ud Daula

Reputation: 1321

Use display: flex like this

.footer {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #393e46;
  height: 15%;
  top: 360%;
  left: 0;
  right: 0;
}

.hyperlink {
  color: #cdffeb;
  position: relative;
  font-size: 2em;
}

Upvotes: 0

Daniel Doblado
Daniel Doblado

Reputation: 2848

Just adding text-align: center to footer fixes it, here is a live sample https://codepen.io/dobladov/pen/WLPoJy

Upvotes: 3

Abolfazl Mohajeri
Abolfazl Mohajeri

Reputation: 1987

try this:

.footer {
  text-align: center;
  background-color: #393e46;
  height: 15%;
  top: 360%;
  padding: 16px 16px 0 16px;
  left: 0;
  right: 0;
}

.hyperlink {
  color: #cdffeb;
  position: relative;
  text-align: center;
  right: 0;
  left: 0;
  bottom: 0;
  top: 0;
  margin: auto;
  font-size: 2em;
}
<div class="footer">
<a class="hyperlink" href="https://www.linkedin.com/in/diogo-neiss-501001165/">LinkedIn</a>
<a class="hyperlink" href="https://github.com/diogoneiss">Git Hub</a>
</div>

Upvotes: 0

Related Questions