I can not style and center the menu text

Navigation
-1

Good afternoon, I'm putting a set menu on my blog, this is the image.

Thetextnexttothehomeiconiswithoutstyle,howdoIstylethistextbyleavingitcenteredandspaced,changethefontcolor,andputhover?

That'sthecode.

/*---TOPFIXEDMENIUBLOGGER--------------*/#menu_fixo{width:100%;height:45px;background-color:#ffa233;border:0px;border-bottom:solid1px#333;padding:0;margin:0;position:fixed;z-index:10;}#menu_fixo#centro{width:880px;height:45px;margin:0auto;border:0px;padding:0;display:block;position:relative;}#menu_fixo#centroli{text-decoration:none;display:inline;float:left;}#icone_home{background-image:url(http://2.bp.blogspot.com/-LkHsu7cfje8/U1UpThxpECI/AAAAAAAAAPc/RMSpYE-raKs/s1600/home.png);background-repeat:no-repeat;background-position:centercenter;width:40px;height:45px;border-left:solid1px#FFF;border-right:solid1px#FFF;margin:0px;padding:0px;}#icone_home:hover{background:#000url(http://2.bp.blogspot.com/-LkHsu7cfje8/U1UpThxpECI/AAAAAAAAAPc/RMSpYE-raKs/s1600/home.png)no-repeatcentercenter;}#social_fixo{width:180px;height:45px;border:solid0px#000;float:right;margin:0;padding:0;display:block;position:relative;top:0px;}#icone_facebook{background-image:url(http://2.bp.blogspot.com/-kOAGPn3Ee_0/U1UpTrO8rLI/AAAAAAAAAPk/7cdUoKYU1W4/s1600/icon_facebook.png);background-repeat:no-repeat;background-position:topcenter;width:45px;height:45px;margin:0px;padding:0px;}#icone_twitter{background-image:url(http://4.bp.blogspot.com/-LyeRkpB716w/U1UpUunplPI/AAAAAAAAAP4/zki33yOb9B8/s1600/icon_twitter.png);background-repeat:no-repeat;background-position:topcenter;width:45px;height:45px;margin:0px;padding:0px;}#icone_gplus{background-image:url(http://2.bp.blogspot.com/-E7UGiWMmy-4/U1UpTteTpmI/AAAAAAAAAPg/COkFj9AycMM/s1600/icon_google+.png);background-repeat:no-repeat;background-position:topcenter;width:45px;height:45px;margin:0px;padding:0px;}#icone_youtube{background-image:url(http://2.bp.blogspot.com/-YJyJLW221zE/U1UpU1Uh2VI/AAAAAAAAAQA/Pi3e-kBwm0c/s1600/icon_youtube.png);background-repeat:no-repeat;background-position:topcenter;width:45px;height:45px;margin:0px;padding:0px;}#caixa-pesquisa{width:400px;height:35px;border:solid1px#3f3f3f;margin:0;padding:0;background-color:#fff;display:table;margin-left:200px;margin-top:0px;float:none;position:relative;top:5px;}.campo-pesquisa{width:350px;height:35px;border:0px;margin:0;padding:0;margin-left:5px;border-style:none;outline:none;font-family:arial;color:#5e5e5e;}.botao-pesquisa{border:solid0px;background-image:url(http://3.bp.blogspot.com/-2CosUiZa8Qo/U1UpUa6ryYI/AAAAAAAAAP0/m-e14j6j0x4/s1600/icon_search.jpg);float:right;cursor:pointer;height:35px;width:35px;}button,htmlinput[type="button"], input[type="reset"], input[type="submit"] {
    -webkit-appearance: button;
    cursor: pointer;
}

Code html : 

<div id="menu_fixo">
    <div id="centro">
        <li><a href="LINKDOBLOG"><div id="icone_home"></div></a></li>
        <li><a href=' /'>Sobre</a></li>
        <li><a href=' /'>loja virtual</a></li>
        <li><a href=' /'>Contato</a></li>
    </div>
</div>

If you can help me, I thank you.

    
asked by anonymous 09.12.2015 / 21:27

1 answer

1

Well come on.

Before centering the text, let's create the spacing between them. For this you can use the padding property, it will create an internal space, that is, within a space within itself li . The value is at your discretion, but the code would look like this: 

#menu_fixo #centro li {
    text-decoration: none;
    display: inline;
    float: left;

    /* - código adicionado - */
    padding: 0 10px 0 10px; //valores: cima - direita - baixo - esquerda
}

For text to be all centered horizontally and vertically, you can use both the text-align:center property that will center horizontally, and the vertical-align:middle property that, using the line:height property, will center it vertically. See: 

#menu_fixo #centro li {
    text-decoration: none;
    display: inline;
    float: left;
    padding: 0 10px 0 10px; //valores: cima - direita - baixo - esquerda

    /* - código adicionado - */
    height:45px; //valor da altura do seu menu;
    line-height:45px; //mesmo valor, para que mantenha dentro da div
    vertical-align:middle; //para centralizar verticalmente
    text-align:center; //para centralizar horizontalemnte
}

Now, if you want a :hover effect, just apply the properties inside it, as follows: 

#menu_fixo #centro li:hover {
    //Seu código de manipulação aqui
}

See this example with your code already working: link

    
10.12.2015 / 01:13
Go through directories with recursive in JAVA [closed] Insert N comments, having the option to edit them at any time and then save those comments [closed]