Ir para conteúdo

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Renan Pablo_28457

Como alinhar menu ao centro e na horizontal

Recommended Posts

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

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

×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.