Add one more style text-align:center to #footer-menu in css.
CSS: can't center a UL
-
18-07-2023 - |
Pergunta
On this page, I have a footer menu #menu-footer-menu; "About - Select Your City - How Walks Work..." generated by Wordpress.
<div class="menu-footer-menu-container">
<ul id="menu-footer-menu" class="menu">
<li id="menu-item-143"><a href="#">About</a></li>
<li id="menu-item-151"><a href="#">Select Your City</a></li>
<li id="menu-item-162"><a href="#">How Walks Work</a></li>
<li id="menu-item-160"><a href="#">FAQs</a></li>
<li id="menu-item-166"><a href="#">Blog</a></li>
<li id="menu-item-153"><a href="#">Partners</a></li>
<li id="menu-item-154"><a href="#">Press</a></li>
<li id="menu-item-144"><a href="#">Privacy Policy</a></li>
<li id="menu-item-145"><a href="#">Site Map</a></li>
<li id="menu-item-146"><a href="#">Terms & Conditions</a></li>
</ul>
</div>
I want to center this menu.
I tried the following CSS but it didn't work:
div.menu-footer-menu-container {text-align:center;}
ul#menu-footer-menu.menu {
list-style-type: none;
width: 760px !important;
margin: 0 auto !important;
display: inline-block !important;
}
ul#menu-footer-menu li {
display: inline-block !important;
margin-right: 14px;
margin-right: 1rem;
}
Solução 6
Outras dicas
Use following css instead of what you have. I just changed display for ul#menu-footer-menu.menu to block nothing else.
div.menu-footer-menu-container {text-align:center;}
ul#menu-footer-menu.menu {
list-style-type: none;
width: 760px !important;
margin: 0 auto !important;
display: block !important;
}
ul#menu-footer-menu li {
display: inline-block !important;
margin-right: 14px;
margin-right: 1rem;
}
You need to add one wrapper element with a width of 100% to center your div in.
Like:
<div class="wrapper">
<div class="menu-footer-menu-container">
...
</div>
.wrapper{ width:100% }
Use display:block
instead of inline-block
ul#menu-footer-menu.menu {
list-style-type: none;
width: 760px !important;
margin: 0 auto !important;
display: block !important;
}
Try to add CSS Style :
.menu-footer-menu-container
{
text-align: center;
}
You have two ways to do it
width degradation center tag
<center> <ul> ... </ul> </center>
Create another div to force the center
.center { margin: auto; text-align: center; }
<div class="center"> <ul> ... </ul> </div>
Note: The tag must be inline-block.
width text-align:center;
ul{ text-align: center; } <center> <ul> ... </ul> </center>
Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow