Centrar elementos de una lista de forma independiente

[husseincak]

Buenas!!
La pregunta es bien sencilla, pero no me sale
El caso es que quiero centrar los elementos de una lista horizontal de forma independiente, pero solo se me centran de forma conjunta, como en la imagen:



Muchas gracias y disculpen mi torpeza

[Bandit]

Hola husseincak:
Acostúmbrate a publicar los códigos HTML y CSS que estás usando, de ese modo es más fácil ver tu error.
Si quieres que se centre los textos individualmente en cada una de ellas, tendrás que indicarle el ancho de los li y utilizar: text-align: center;;

Espero haberte sido de ayuda.

[husseincak]

mmm, pues no se me centra individualmente, no cambia el tamaño del li. Pongo aqui el codigo:
Aqui el CSS:

Código CSS:

#navbar {
    height:120px;
    margin:15px auto;
}
 
#navprin{  
    list-style:none;
    margin:0;
    padding:0;
    text-align:center;
    font-size:25px;
    color:#000;
    background-color:#CCC;
}
 
#navprin li{  display:inline;}
 
#navprin a{  display:inline-block;  padding:15px;}
 
#navprin h1 {
    display:inline;
    text-align:center;
    font-size:25px;
    color:#000;
    margin-top:10px;
}
 
#navsec{  
    list-style:none;
    margin:0;
    padding:0;
    text-align:center;
    font-size:25px;
    color:#000;
    background-color:#EEE;
}
 
#navsec li{  display:inline;}
 
#navsec a{  display:inline-block;  padding:15px;}
 
#navsec h1 {
    display:inline;
    text-align:center;
    font-size:20px;
    color:#000;
    margin-top:10px;
}
 

Y por aquí el html5:

Código HTML:

<div id="navbar" class="wrapper">
        
        <nav>
            <ul id="navprin">
                <li>
                    <a href="#"><h1>Timeline Principal</h1></a>
                </li>
                
                <li>
                    <a href="#"><h1>Timeline Principal</h1></a>
                </li>
                
                <li>
                    <a href="#"><h1>Timeline Oficial</h1></a>
                </li>
            </ul>
        </nav>
        <nav>
            <ul id="navsec">
                <li>
                    <a href="#"><h1>Todos</h1></a>
                </li>
                
                <li>
                    <a href="#"><h1>Privado</h1></a>
                </li>
                
                <li>
                    <a href="#"><h1>Categoria 1</h1></a>
                </li>
            </ul>
        </nav>
    </div>
 

[pzin]

¿Y dónde especificas un ancho a LI y el text-align:center como te dijo Bandit?

A saber qué pintan los encabezados en una lista.

[husseincak]

En este código no lo he puesto, pero el nuevo si, y sigue sin ir. :(

Y lo de los encabezados han sido unas teorias mias que me he montado en la cabeza y por lo visto me he liado, xD

Arreglado, para quien le interese, en el "li", he cambiado el "display:inline" por "display:inline-block".
Este es el código nuevo:

Código CSS:

#navbar {
    height:120px;
    margin:15px auto;
}
 
#navprin{  
    list-style:none;
    margin:0;
    padding:0;
    text-align:center;
    font-size:25px;
    color:#000;
    background-color:#CCC;
}
 
#navprin li{ display:inline-block; width: 406px; text-align:center;}
 
#navprin a{ display:inline-block; padding:15px;}
 
#navprin .top {
    display:inline;
    text-align:center;
    font-size:25px;
    color:#000;
    margin-top:10px;
}
 
#navsec{  
    list-style:none;
    margin:0;
    padding:0;
    text-align:center;
    font-size:25px;
    color:#000;
    background-color:#EEE;
}
 
#navsec li{  display:inline-block; width: 406px; text-align:center;}
 
#navsec a{  display:inline-block; padding:15px;}
 
#navsec .botton {
    display:inline;
    text-align:center;
    font-size:20px;
    color:#000;
    margin-top:10px;
}
 

Código HTML:

<div id="navbar" class="wrapper">
        
        <nav>
            <ul id="navprin">
                <li>
                    <a href="#"><div class="top">Timeline Principal</div></a>
                </li>
                
                <li>
                    <a href="#"><div class="top">Timeline Principal</div></a>
                </li>
                
                <li>
                    <a href="#"><div class="top">Timeline Oficial</div></a>
                </li>
            </ul>
        </nav>
        <nav>
            <ul id="navsec">
                <li>
                    <a href="#"><div class="botton">Todos</div></a>
                </li>
                
                <li>
                    <a href="#"><div class="botton">Privado</div></a>
                </li>
                
                <li>
                    <a href="#"><div class="botton">Categoria 1</div></a>
                </li>
            </ul>
        </nav>
    </div>