Renan Pablo_28457 0 Denunciar post Postado Abril 22, 2014 Estava testando alguns templates e me deparei com a seguinte questão, como alinhar o menu ao centro e deixa-lo na vertical, ja tentei text-align, não funcionou, o que reparei é que ao tirar o float ele fica no centro, mas o menu fica na vertical, como posso resolver isso, segue ai código do menu o que esta aqui esta sem nenhuma alteração. /* -------------------------------------------------- */ /* Main Navigation /* -------------------------------------------------- */ .menu-container { margin-top: 20px; border-top-width: 1px; border-top-style: solid; border-top-color: #ebebeb; border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: #ebebeb; } .scribble .menu-container { border-top-width: 2px; border-bottom-width: 2px; border-left-width: 0; border-right-width: 0; -webkit-border-image: url(images/scribble/border-line.png) 2 repeat; -moz-border-image: url(images/scribble/border-line.png) 2 repeat; border-image: url(images/scribble/border-line.png) 2 repeat; } .fixed#header .menu-container { float: right; margin: 0; border-top-width: 0; border-bottom-width: 0; } .menu-container .navigation { float: left; } .navigation > div > ul > li { position: relative; display: block; float: left; } .navigation > div > ul > li > a { display: block; margin: 0; padding: 11px 20px 9px; border-width: 0 0 0 1px; border-style: none none none solid; border-color: transparent transparent transparent #ebebeb; color: #1e1e1e; text-transform: uppercase; font-size: 12px; } .scribble .navigation > div > ul > li > a { -webkit-border-image: url(images/scribble/border.png) 0 0 0 1 repeat; -moz-border-image: url(images/scribble/border.png) 0 0 0 1 repeat; border-image: url(images/scribble/border.png) 0 0 0 1 repeat; } .safari.scribble .navigation > div > ul > li > a { -webkit-border-image: none; } .navigation a { font-weight: 600; font-family: 'Open Sans', Arial, sans-serif; } .scribble .navigation a { font-family: 'Handlee', cursive; } .scribble .navigation > div > ul > li > a { font-size: 11px; } .ie7 .navigation > div > ul > li > a, .ie8 .navigation > div > ul > li > a { font-weight: 400; } .navigation > div > ul > li:first-child > a { border-left-width: 0; } .navigation > div > ul > li:hover > a, .navigation > div > ul > li.current-menu-item > a, .navigation > div > ul > li.current-menu-parent > a, .navigation > div > ul > li.current-menu-ancestor > a, .navigation > div > ul > li.current_page_item > a, .navigation > div > ul > li.current_page_parent > a, .navigation > div > ul > li.current_page_ancestor > a { color: #fff; } .scribble .navigation > div > ul > li:hover > a, .scribble .navigation > div > ul > li.current-menu-item > a, .scribble .navigation > div > ul > li.current-menu-parent > a, .scribble .navigation > div > ul > li.current-menu-ancestor > a, .scribble .navigation > div > ul > li.current_page_item > a, .scribble .navigation > div > ul > li.current_page_parent > a, .scribble .navigation > div > ul > li.current_page_ancestor > a { background-image: url(images/scribble/bg.png); background-repeat: repeat; } /* Dropdown */ .navigation ul ul { position: absolute; z-index: 9999; display: none; margin-top: 1px; width: 180px; background-color: #fff; -webkit-box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.025); -moz-box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.025); box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.025); opacity: 1; } .navigation ul ul li { position: relative; margin-top: -1px; border: 1px solid #eaeaea; background-color: #fff; } .navigation > div > ul ul li:hover, .navigation > div > ul ul li.current-menu-item, .navigation > div > ul ul li.current-menu-parent, .navigation > div > ul ul li.current-menu-ancestor, .navigation > div > ul ul li.current_page_item, .navigation > div > ul ul li.current_page_parent, .navigation > div > ul ul li.current_page_ancestor { border-left-color: transparent; border-right-color: transparent; background-color: #f9f9f9; } .navigation ul ul li a { display: block; padding: 6px 20px; color: #818181; font-weight: 400; font-size: 13px; } .navigation ul ul li a:active { -webkit-box-shadow: inset 0 0 2px rgba(0,0,0,.05); -moz-box-shadow: inset 0 0 2px rgba(0,0,0,.05); box-shadow: inset 0 0 2px rgba(0,0,0,.05); } .navigation > div > ul ul li:hover > a, .navigation > div > ul ul li.current-menu-item > a, .navigation > div > ul ul li.current-menu-parent > a, .navigation > div > ul ul li.current-menu-ancestor > a, .navigation > div > ul ul li.current_page_item > a, .navigation > div > ul ul li.current_page_parent > a, .navigation > div > ul ul li.current_page_ancestor > a { background-color: #f9f9f9; } .navigation ul ul li .rightarrowclass:before { position: absolute; top: 9px; right: 10px; color: #eaeaea; content: "\f054"; font-weight: 100; font-style: normal; font-size: 9px; font-family: "FontAwesome", Arial; } .navigation ul ul li:hover > a .rightarrowclass:before { color: #ccc; } /* Sub Dropdown */ .navigation ul ul ul { left: 178px; top: -1px; } /* Responsive Select */ .responsive-nav { display: none; margin-bottom: 25px; background-color: transparent; background-image: url(images/icons/select-arrows.png); background-position: 98% top; border-width: 1px 0 1px 0; border-style: solid; border-color: #ebebeb transparent #ebebeb transparent; } .responsive-nav:focus { background-color: transparent; background-position: 98% bottom; border-color-top: #ebebeb; border-color-bottom: #ebebeb; border-color-left: transparent; border-color-right: transparent; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; } Compartilhar este post Link para o post Compartilhar em outros sites
stromdh 15 Denunciar post Postado Abril 23, 2014 Cara, tu já experimentou setar uma altura para o teu .menu-container? Seta uma altura pra ele (se a div comessa classe for a que engloba tudo) e faz os seguintes passos nele: position: absolute; top:50%; margin-top: -metadeDaAlturaQueDeclarou; Com isso ele ficará alinhado no meio da página. Compartilhar este post Link para o post Compartilhar em outros sites
Renan Pablo_28457 0 Denunciar post Postado Abril 23, 2014 Exatamente, funcionou aqui, obrigado pela atenção (Y) Compartilhar este post Link para o post Compartilhar em outros sites