•  23-07-2023
  •  | 
  •  

Question

As you can tell from the title, I am trying to centralize my li elements within a ul element. However, despite trying several solutions like fixed width + inline-block, table and table-cell, it still doesn't seem to work for me.

Basically in my case I have a button, and a ul that is placed next to it as both are 

display: inline;

So any ideas?

<html>
    <head>
        <title>2i3</title>
        <style>
        * {
            font-family: Arial, Calibri, sans-serif;
        }
        #button {
            background-color: red;
            border: soild red 2px;
            border-radius: 200px;
            color: white;
            font-size: 20px;
            margin: 20px;
            display: inline-block;
            padding: 0px;
            width: 50px;
            height: 50px;
            line-height: 50px;
            text-align: center;
            cursor: pointer;
        }
        #button:hover {
            background-color: #830d1e;
            box-shadow: 5px 5px 3px #888888;
        }
        #menu {
            list-style-type: none;
            text-align: center;
            padding: 0px;
            margin: 0px;
            display: inline;
        }
        #menu li {
            border: solid red 2px;
            border-radius: 100px;
            padding: 15px;
            width: 150px;
            display: inline-block;          
            color: blue;
            text-align: center;
            font-weight: bold;
            cursor: pointer;
        }
        #menu li:hover {
            background-color: yellow;
            text-decoration: underline;
        }
        </style>
    </head>
    <body>
        <div id="button">O</div>
        <ul id="menu">
            <li>Guo Yulong</li>
            <li>B</li>
            <li>C</li>
            <li>D</li>
        </ul>
    </body>
</html>

EDIT: Sorry that I wasn't clear, I wanted to have equal margins set using auto between the li elements.

Was it helpful?

Solution

Remove display:inline from #menu and add text-align:center;

Demo Fiddle

This basically tells the ul to center any textual content, as you have the li set to display:inline-block they are effectively treated as textual content so centered. If you wish your button to appear next to the menu, you have a number of options, the 'easiest' is to apply float:left to it

There are really two main ways of centering content:

  1. Text Alignment (inline elements): Set the child elements to either display:inline or display:inline-block, then set the parent container to text-align:center, the children will center in the parent- depending on whatever its width

  2. Margin Alignment (block elements): If the child content is block level (display:block) set text:align:center; on the parent, then give the child margin:0 auto and a fixed width less than that of the parent

OTHER TIPS

HTML

<div class="menu-container">
    <ul id="menu" class="menu">
         <li>Guo Yulong</li>
         <li>B</li>
         <li>C</li>
         <li>D</li>
    </ul>
</div>

CSS

.menu-container {text-align: center;}
.menu-container ul {margin: 0px auto; display: inline-block;}
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top