CODEWITHSUNDEEP
htmlcss
ItzJavaCraft
ItzJavaCraft

Reputation: 91

Center div in a footer

I want to align a list of links in the footer of my website, but no matter what I try, it doesn't seem to align in the center of the footer (Like in the w3schools footer for example).

I have tried using display: block, display: inline-block, text-align: center and others but no matter what I do I can never seem to get it right.

CSS:

footer ul {
  list-style: none;
  text-align: center;
  }

footer div {
  margin: 0 auto;
  display: inline-block;
  }

footer {
  margin-left: 25%;
  }

HTML:

<footer>
  <div>
    <ul>
      <li><a href="#" target="_blank">Facebook</a></li>
      <li><a href="#" target="_blank">Twitter</a></li>
      <li><a href="#" target="_blank">Instagram</a></li>
      <li><a href="#" target="_blank">Vine</a></li> 
    </ul>
  </div>
  <div>
    <ul> 
      <li><a href="#" target="_blank">YouTube</a></li>
      <li><a href="#" target="_blank">Twitch</a></li>
      <li><a href="#" target="_blank">Mobcrush</a>
      <li><a href="#" target="_blank">SoundCloud</a></li>
    </ul>
  </div>
  <div>
    <ul>
      <li><a href="#" target="_blank">GitHub</a></li>
      <li><a href="#" target="_blank">Stack Overflow</a></li>
      <li><a href="#" target="_blank">Pastebin</a></li>
      <li><a href="#" target="_blank">Curse</a></li>
    </ul>
  </div>
  <div>
    <ul>
      <li><a href="#" target="_blank">~</a></li>
      <li><a href="#" target="_blank">~</a></li>
      <li><a href="#" target="_blank">~</a></li>
      <li><a href="#" target="_blank">~</a></li>
    </ul>
  </div>
</footer>

Any help would be great, thanks!

Upvotes: 1

Views: 2847

Answers (4)

C. Scott Asbach
C. Scott Asbach

Reputation: 54

If you set the width of your footer element to 50% (25% left margin + 50% width leaves an effective 25% right margin, thus centering the footer itself first) and set the text-align of the footer element to center, it will center the footer divs how you want. Note, however, that this sets the text-alignment of the child elements to center as well, but in this case that appears to be what you want.

footer {
  margin-left: 25%;
  width:50%;
  text-align: center;
}

Upvotes: 0

Ahmad Sharif
Ahmad Sharif

Reputation: 4435

Try Display Table

footer ul {
  list-style: none;
  text-align: center;
  }

footer div {
  margin: 0 auto;
  display: table;
  }

footer {
  margin-left: 25%;
  }

Upvotes: 0

Wowsk
Wowsk

Reputation: 3675

Just use display:flex; on the footer.

footer ul {
  list-style: none;
  text-align: center;
  }

footer div {
  margin: 0 auto;
  display: inline-block;
  }

footer {
  display:flex;
  
  }
<footer>
  <div>
    <ul>
      <li><a href="#" target="_blank">Facebook</a></li>
      <li><a href="#" target="_blank">Twitter</a></li>
      <li><a href="#" target="_blank">Instagram</a></li>
      <li><a href="#" target="_blank">Vine</a></li> 
    </ul>
  </div>
  <div>
    <ul> 
      <li><a href="#" target="_blank">YouTube</a></li>
      <li><a href="#" target="_blank">Twitch</a></li>
      <li><a href="#" target="_blank">Mobcrush</a>
      <li><a href="#" target="_blank">SoundCloud</a></li>
    </ul>
  </div>
  <div>
    <ul>
      <li><a href="#" target="_blank">GitHub</a></li>
      <li><a href="#" target="_blank">Stack Overflow</a></li>
      <li><a href="#" target="_blank">Pastebin</a></li>
      <li><a href="#" target="_blank">Curse</a></li>
    </ul>
  </div>
  <div>
    <ul>
      <li><a href="#" target="_blank">~</a></li>
      <li><a href="#" target="_blank">~</a></li>
      <li><a href="#" target="_blank">~</a></li>
      <li><a href="#" target="_blank">~</a></li>
    </ul>
  </div>
</footer>

Upvotes: 2

Przemysław Melnarowicz
Przemysław Melnarowicz

Reputation: 1057

footer {text-align: center;}
footer div { display: inline-block; }

Is that you want to accomplish?

Upvotes: 0

Related Questions