Ir para conteúdo

POWERED BY:

Arquivado

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

feliper

alinhamento vertical

Por , em Desenvolvimento frontend

Recommended Posts

feliper    0

feliper
Postado

Opa pessoal, estou com uma duvida de alinhamento vertical, preciso que todos elementos fiquem centralizados na vertical, igual:

 

 

000.gif

 

 

E está ficando assim:

 

screenshot_domain_date_time.png

 

O código utilizado é:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Catalago de Vendas</title>
<link href="css/estilos.css" rel="stylesheet" type="text/css">
<!-- 
<link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Open+Sans" /> 
-->

</head>

<body>

<div id="corpo">

	<div id="header">
	</div>

	<div id="menu">
		<div id="margem">
        	<div id="logo">
	        	<a href="index.html"><img src="img/logo.png" alt="Catalago de Vendas"></a>
    	    </div>

			<ul>
    	    <li><a href="index.html#comofunciona"><font color="red">#</font>COMO FUNCIONA</a>  </li>
        	<li><a href="index.html#vantagens"><font color="red">#</font>VANTAGENS</a>  </li>
	        <li><a href="index.html#quemusa"><font color="red">#</font>QUEM USA</a>  </li>
    	    <li><a href="index.html#euquero"><font color="red">#</font>EU QUERO</a>  </li>
        	</ul>


		</div>
	</div>

</div>

</body>
</html>

@charset "utf-8";
body {
	background-color: #FFF;
	margin-left:0px;
	margin-top:0px;
	margin-right:0px;
	margin-bottom:0px;
}

a {
	text-decoration:none;
	color:#FFF;
}

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

li {
    float:right;
	font-family:'Open Sans';
	font-size:18px;
	font-style:normal;
	font-variant:normal;
	text-decoration:none;

}

#corpo {
	margin-left:auto;
	margin-right:auto;
}

#margem {
    margin-left: auto;
    margin-right: auto;
	width:1020px;
}

#header {
	height: 10px;
	width: auto;
	background-color: #c61d23;
}

#menu {
	background-image:url(../img/header-menu-background.gif);
	background-repeat:repeat-x;
	height:118px;
	width:100%;
	display:table;
	vertical-align:middle;	
}

#logo {
	vertical-align:middle;
}

Agradeço desde já a ajuda.

Compartilhar este post

Link para o post
Compartilhar em outros sites

André do Vale    76

André do Vale
Postado

Vertical-align no meio, da forma que você está pensando, só funciona com elementos que tenham display: table-cell (e ainda, sendo necessário o pai estar com display: table ou display: inline-block). Entretanto, a partir do momento que elementos filhos flutuem dentro do box, esta propriedade se torna dispensável.

 

O vertical-align, porém, tem um funcionamento mais amplo, que atinge os elementos laterais, conforme: http://www.w3.org/wiki/CSS/Properties/vertical-align.

 

Para fazer o que você deseja, faça os elementos flutuarem para esquerda (logo) e direita (menu), e a partir daí coloque margens neles para posicioná-los conforme layout.

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Desenvolvimento frontend
×

Informação importante

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

  Aceito