Css: How to Center a Horizontal List? Display:Inline Not Working

CSS: How can I center a horizontal list? Display:Inline not working

The reason they refuse to center is because they are also floated to the left. Change dislay: inline to display: inline-block; float: none and they appear centered.

Edit: There's a lot of (mostly unnecessary) CSS code in there so you'll probably need to tweak a few other things before it looks right, but the floating is what's causing the non-centering at least.

display: inline or dsplay: inline block not making my list horizontal

As others said, the right one to use is inline-block, even so don't forget to change the div width as big as your 3 li's so it can be arranged side by side.

ul{list-style-type: none;margin:0;padding:0;}
.doc-thumb {display:inline-block;text-align:center;}
div {display:inline-block;width: 1500px;}
.docs {text-align:center;display:inline-block;}

Fiddle..

Why won't my html inline-block list not center?

Try adding this to make it center:

ul {
  padding-inline-start: 0px;
}

working example:

#footer {
    text-align: center;
    background-color: rgb(44,44,44);
    padding: 4px 2px;
    margin-top: 20px;
}

#icons {
    font-size: 25px;
    color: #FFDA20;
}

#copyright {
    font-size: 10px;
}

#footer-links {
    margin-top: 2px;
    color: #FFDA20;

}

.social-icons {
    margin: 0 auto;
    text-align: center;
}
.social-icons li {
    display: inline-block;
    list-style-type: none;
    -webkit-user-select: none;
    -moz-user-select: none;
}
.social-icons li a {
    border-bottom: none;
}
.social-icons li img {
    width: 40px;
    height: 40px;
    margin-right: 2px;
    margin-left: 2px;
}

ul {
  padding-inline-start: 0px;
}

<html>
  <head>
         <link rel="stylesheet" href="https://brighttest.glitch.me/css/footer.css" />
  </head>
<body>

<!--Footer-->
        <div id="footer">
            <p id="footer-links"><a href="gallery">Gallery</a> ▪ <a href="contact">Contact</a></p>
              <ul class="social-icons">
                <li><a href="#"><img src="https://i.vgy.me/jfhukA.png"></a></li>
                <li><a href="#"><img src="https://i.vgy.me/t2NABP.png"></a></li>
                <li><a href="#"><img src="https://i.vgy.me/LQsbID.png"></a></li>
                <li><a href="#"><img src="https://i.vgy.me/iXf7o4.png"></a></li>
                <li><a href="#"><img src="https://i.vgy.me/aTpGpk.png"></a></li>  
                <li><a href="#"><img src="https://i.vgy.me/4Ufaac.png"></a></li>   
                
            </ul>
            <p id="copyright">© Bright Lightning 2016-2020</p>
        </div>
    </body>
</html>

CSS center display inline block?

The accepted solution wouldn't work for me as I need a child element with display: inline-block to be both horizontally and vertically centered within a 100% width parent.

I used Flexbox's justify-content and align-items properties, which respectively allow you to center elements horizontally and vertically. By setting both to center on the parent, the child element (or even multiple elements!) will be perfectly in the middle.

This solution does not require fixed width, which would have been unsuitable for me as my button's text will change.

Here is a CodePen demo and a snippet of the relevant code below:

.parent {
  display: flex;
  justify-content: center;
  align-items: center;
}

<div class="parent">
  <a class="child" href="#0">Button</a>
</div>

How to fix: CSS display:inline-block with text-align:center on parent is slightly off-center

You Try

    <nav id="menu">

        <ul>
            <li class="menuitem"><a href="index.html">Home</a></li>
            <li class="menuitem"><a href="gallery.html">Gallery</a></li>

            <li class="menuitem"><a href="shop.html">Shop</a></li>
            <li class="menuitem"><a href="contact.html">Contact</a></li>
        </ul>
    </nav>

CSS:

#menu{
    width:960px;
    max-height:90px;
    background:#ffffff;
}

#menu ul{
    text-align:center;
    list-style:none;
    padding: 18px 0 0 0;
    width:960px;
}

#menu li{
    display:inline-block;
    vertical-align:middle;
}

#menu li a,menu li a:visited{
    color:#333347;
    text-decoration:none;
    font-size:20px;
    font-weight:bold;
    padding:0px 13px 0px 13px;
}

It will make list at center

Display list horizontally is not working with display inline

You are creating a new unordered list ul for every $memberinfo, so the display:inline is working, but the ul's remain like block elements.
Create the ul tag before the foreach and close it after it, so your list items will be displayed like you want:

echo "<ul>";
foreach ($memberinfo as $info) {
    echo "<li><a href='profile.php?user_id=" . $info['user_id'] . "'><img class='group_member_img' src='uploads/" . $info['avatar']  .   "'/><br>" . $info['surname'] . " " . $info['name'] . "</a></li>";
}
echo "</ul>";

By the way, the break line br tag is unnecessary because you want to put every li one beside the other.

CSS won't center list within parent div

You cannot have both float and inline-block display:

.paginator li{
  display: inline-block;
  /* float: left; /* This forces you to put it to left align */
  padding: 8px 16px;
  border-radius: 5px;
  font-size: 1.3em;
  text-align: center;
}

Remove the above said rule and it should be working fine.

Center-align horizontal inline-block list of page numbers

Ah, the art of centering elements in CSS. Good thing we have flexbox to help us all out.
This should do the trick:

.pt-cv-pagination-wrapper .pt-cv-pagination.pagination {
  display: flex;
  justify-content: center;
}

display: inline-block does not produce horizontal result

add float: left to .sticky (and some margin left or/and right):

https://jsfiddle.net/Lcrysuzy/