Html - Footer list text won't center

ErikasPetrauskas
July 9, 2024
191 views
0 votes
2 Answers

I’ve got a problem with centering the list in my footer, it looks as if there’s padding on the left side preventing it from centering.

<footer>
        <div class="footerContainer">
            <img src="/images/middle.png" class="center" style="width: 100%;">
            
            <div class="footerNav">
                <ul><li><a a target="###">My Store</a></li>
                    <li><a href="#artwork">My Artwork</a></li>
                    <li><a href="#webdesigns">My Web designs</a></li>
                    <li><a href="#top">Back to top</a></li>
                </ul>
            </div>
        </div>
    </footer>

footer{
    background-color: rgb(35, 18, 61);   
}
.footerContainer{
    width: 100%;
    padding: 20px 30px 20px ;
    text-align: center;
}

.footerNav{
    margin: 30px 0;
}
.footerNav ul{
    display: flex;
    justify-content: center;
    list-style-type: none;
}

.footerNav ul li a{
    margin: 20px;
    text-decoration: none;
    font-size: 1.2em;
}

@media (max-width: 360px){
    .footerNav ul{
        flex-direction: column;
    } 
    .footerNav ul li{
        text-align: center;
        margin: 10px;
    }
}

I’ve tried adding text-align: center; to every footer element, I’ve also added tried margin: 0 auto; and I’ve looked through the padding and margins through the rest of my HTML file but nothing changes after deleting them. What am I missing?

Tags: css html

Answers

Here are what I changed and added:

.footerContainer – I changed your width to auto instead of 100%.
setting it to 100% is make the container as wide as possible while
auto can adjust to the best possible extra space it can allow to.
Override user agent stylesheets by setting li display to ‘contents’. This means that the extra space that was in the list-item is deleted completely.
Override user agent stylesheet by setting ul padding-inline-start that is set to 40px by default to 0!important.

footer{
background-color: rgb(35, 18, 61);   
}
.footerContainer{
    width: auto ;
    padding: 20px 30px 20px ;
    text-align: center;
}

.footerNav{
    margin: 30px 0;
}
.footerNav ul{
    display: flex;
    justify-content: center;
    list-style-type: none;
}

.footerNav ul li a{
    margin: 20px;
    text-decoration: none;
    font-size: 1.2em;
}

ul {
    padding-inline-start: 0!important;
}

li {
  display: contents!important;
}

@media (max-width: 360px){
    .footerNav ul{
        flex-direction: column;
    } 
  

    .footerNav ul li{
        align-content: center;
        margin: 10px;
        
    }
  
}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <footer>
        <div class="footerContainer">
            <img src="/images/middle.png" class="center" style="width: 100%;">
            
            <div class="footerNav">
                <ul><li><a a target="###">My Store</a></li>
                    <li><a href="#artwork">My Artwork</a></li>
                    <li><a href="#webdesigns">My Web designs</a></li>
                    <li><a href="#top">Back to top</a></li>
                </ul>
            </div>
        </div>
    </footer>
</body>
</html>

The first problem is that you specify that your footerContainer has a width of 100% (of its parent, the footer), but that it also has padding. The default box model is that the width of a box is the width of its content only, excluding its padding and border. That’s why the container ends up being too large and overflowing to the right. You can set box-sizing: border-box on footerContainer to use the alternate box model where the specified width includes any padding and border. Alternatively, you can remove width: 100% as @franjangonz suggests.

footer {
  color: white;
  background-color: rgb(35, 18, 61);   
}

footer img {
  width: 100%;
}

.footerContainer {
  width: 100%;
  padding: 20px 30px 20px;
  text-align: center;
  box-sizing: border-box;
}

.footerNav {
  margin: 30px 0;
}

.footerNav ul {
  display: flex;
  justify-content: center;
  list-style-type: none;
}

.footerNav ul li a {
  margin: 20px;
  text-decoration: none;
  font-size: 1.2em;
  color: inherit;
}

@media (max-width: 360px){
  .footerNav ul {
    flex-direction: column;
  } 
  .footerNav ul li {
    text-align: center;
    margin: 10px;
  }
}

<footer>
  <div class="footerContainer">
    <img src="http://picsum.photos/500/100">

    <div class="footerNav">
      <ul>
        <li><a a target="###">My Store</a></li>
        <li><a href="#artwork">My Artwork</a></li>
        <li><a href="#webdesigns">My Web designs</a></li>
        <li><a href="#top">Back to top</a></li>
      </ul>
    </div>
  </div>
</footer>

The second problem is the default styling which is applied to lists. @franjangonz suggests how to override that, but I would simplify the document structure by removing the list entirely. Use a <nav> element for the navigation section, and it does not need to contain a list; it can simply contain the <a> links. In addition, the footerContainer is not necessary, you can simply style the footer itself. Here is a snippet how I would write it:

footer {
  color: white;
  background-color: rgb(35, 18, 61);   
  padding: 30px;
  text-align: center;
  font-size: 1.2em;
}

footer img {
  width: 100%;
}

footer nav {
  margin-top: 30px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 20px;
}

footer nav a {
  color: inherit;
  text-decoration: none;
}

footer nav a:hover {
  color: yellow;
}

<footer>
  <img src="http://picsum.photos/500/100">
  <nav>
    <a href="">My Store</a>
    <a href="#artwork">My Artwork</a>
    <a href="#webdesigns">My Web designs</a>
    <a href="#top">Back to top</a>
  </nav>
</footer>

Please signup or login to give your own answer.

Click here to cancel reply.

Html – Footer list text won't center

Answers