Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
2
respostas

Alinhar ao MEIO um elemento Li de uma UL

por Gabriel Henrique
| 80k xp | 9 posts

Pessoal, estou tentando montar esse nav e fazer com que o texto dos elementos Li fiquem centralizados ao meio do Li, é indispensável que o height do Li seja menor que o height do nav pois existe uma feature nele que muda com o :hover. Segue exemplo do código

HTML

<nav class="menu">
    <ul>
                <li class="HighLighted">    <a>Inicio</a></li>
                <li class="normalItem">        <a class="a-menu" href="./about.html">Sobre</a></li>
                <li class="normalItem">        <a class="a-menu" href="./help.html">Ajuda</a></li>
                <li class="normalItem">        <a class="a-menu" href="./login.html">Entrar</a></li>
                <li class="normalItem">        <a class="a-menu" href="./signup.html">Criar Conta</a></li>
            </ul>


</nav>

CSS

.menu{
    background-color: rgb(0, 1, 39);
    /* background-image: linear-gradient(to right, , rgb(39, 38, 38));  */
    height: 70px;
    width: 100%;
    color:white;
    text-align: center;
}
.menu ul {    

}

.menu li {
    list-style-type: none;
    display: inline-block;
    margin: 0 0 0 18px;
    font-size: 20px;
    height: 100%;
    width: 200px;
}
.menu li:hover{
    background-color:#fff;
    color:black;
}

.a-menu{
    color: inherit;
    text-decoration: none;
}

Exemplo do que esta acontecendo: https://codepen.io/GabrielHNE/pen/BayxoRE

A ideia era deixar esse texto do Li no meio do nav.

2 respostas
solução!
por Diego Rodrigues Cravo Teixeira
| 168k xp | 361 posts

Olá Guilherme, tudo certo?

Não sei se é isso que você deseja, mas para deixar o texto do menu centralizado você pode usar o margin-top no '.menu li', desta maneira:

.menu li {
    list-style-type: none;
    display: inline-block;
    margin-left: 18px;
    font-size: 20px;
    height: 100%;
    width: 200px;
    margin-top: 1em; 
}

Também mudei o margin, que antes estava:

margin: 0 0 0 18px;

para:

margin-left: 18px;

Espero ter ajudado, mas se não for isso é só falar que tentamos ajudar novamente.

por Gabriel Henrique
| 80k xp | 9 posts

Olá Diego, muito obrigado desde já pela resposta, infelizmente não ficou muito legal colocando no margin-top: 1em pois ele desloca o elemento Li e eu gostaria apenas de deslocar o elemento dentro do Li para o centro. Mas utilizei da sua resposta e fiz a mesma coisa, entretanto, para a margem internar - padding-top - do elemento e funcionou perfeitamente.

Gostaria de entender, se possível o porquê do 1em

Código !

.menu li {
    list-style-type: none;
    display: inline-block;
    margin-left: 18px;
    padding-top: 1em;
    font-size: 20px;
    height: 100%;
}