Ir para conteúdo

POWERED BY:

Arquivado

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

alexandremanowar

alinhamento interno da div

Por , em Desenvolvimento frontend

Recommended Posts

alexandremanowar    0

alexandremanowar
Postado

E ae galera beleza

 

Eu estou criando um id para uma div e fiz da seguinte forma:

Esta assim no arquivo css

#corpo_inteiro{	height: 375px;	width: 100%;	margin: 0;	padding: 0;	border: 1px solid #000000;}

aí no html eu chamado o id normalmente:

<div id="corpo_inteiro">

conteúdo

</div>

Esta funcionando normalmente porém a minha dúvida é como eu faço para o conteúdo ficar alinhado exatamente no centro da div? o que devo colocar no css para isso?

Compartilhar este post

Link para o post
Compartilhar em outros sites

Guilherme Rambo    4

Guilherme Rambo
Postado

Tem alguns posts aqui no forum sobre vertical-align, pesquise por isso http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

 

[]'s

Compartilhar este post

Link para o post
Compartilhar em outros sites

webflex    0

webflex
Postado

Olá,

 

Para o conteudo ficar alinhado exactamente no centro use a propriedade text-align: center;

 

Cumps [*]

Compartilhar este post

Link para o post
Compartilhar em outros sites

Hunter_    0

Hunter_
Postado

Acho que ele quer centralizar tanto na horizontal como na vertical. Veja algo sobre vertical-align, mas vertical align pelo que andei lendo só funciona quando o float não está definido, se estiver errado, me corrijam ae por favor.

Compartilhar este post

Link para o post
Compartilhar em outros sites

webflex    0

webflex
Postado

Olá,

 

Amigo gio! optima dica sim senhor ;).

Valeu o post, vou ver se pratico e entendo a sua função.

 

Cumps [*]

Compartilhar este post

Link para o post
Compartilhar em outros sites

alexandremanowar    0

alexandremanowar
Postado

Cara muito legal esse link. Valeu gio, valeu a todos que estão me ajudando. Entendio e já sei como arrumar.

Agora eu tenho mais uma pergunta na verdade duas. No tutorial informava que o vertical-align é para uso inline, tanto que ele usou apenas um campo input, e se eu tiver 3 campos inputs e quiser eles centralizados no div? Vou ter que criar alinhamento individual criando um id com posições e jogar em um <p> e jogar os elementos no <p> por exemplo ou tem uma forma de alinhar tudo no id do div? Aproveitando o post alguém poderia me explicar para quie server o camando padding?

 

Grato

Compartilhar este post

Link para o post
Compartilhar em outros sites

webflex    0

webflex
Postado

Olá,

 

Em relação ao alinhamento vertical, estou um pouco fora ainda mas penso que você teria que tratar da propriedade para cada id.

Respectivamente ao comando padding veja esta pequena explicação - http://www.maujor.com/tutorial/paddingtut.php

 

Cumps [*]

Compartilhar este post

Link para o post
Compartilhar em outros sites

alexandremanowar    0

alexandremanowar
Postado

Cara Valeu pelo tutorial do padding, entendi!

Agora estou tentando arrumar aqui a centralização, conforme o tutorial que o gio postou, porém o meu conteúdo não esta alinhando no centro da div, ele alinha no centro da linha em que ele esta mas não no centro da div! minha div tem um height 473px o conteúdo esta no centro porém no topo da div, eu preciso que fique extamente no centro, olha o meu código:

css:

/*zera as propriedades */{	border: none;	margin: 0;	padding: 0;	font: normal normal normal 12px verdana,helvetica,sans-serif;	text-style: none;	text-decoration: none;}/*fim*//*banner do cabeçalho*/#banner_cabecalho{	height: 120px;	width: 100%;	margin: 0;	padding: 0;	border: 1px solid #000000;}/*fim *//* corpo sem colunas */#corpo_inteiro{	height: 473px;	width: 100%;	margin: 0;	padding: 0;	border: 1px solid #000000;	background-color: #F7F6F1;	text-align: center;}#corpo_inteiro input{	border: 1px solid #ccc;	font: 100% "Trebuchet MS";	vertical-align: middle;}#corpo_inteiro label{	cursor: pointer;	vertical-align: middle;}/*fim*//*banner do roda-pé*/#banner_rodape{	height: 30px;	width: 100%;	margin: 0;	padding: 0;	border: 1px solid #000000;	}/*fim*//*alinhamentos de objetos*/#p1{	}/*fim */

esse é o html

<html><head>	<style type="text/css">		@import url("css/estilo_layout.css");		@import url("css/estilo_textos.css");	</style></head><body><div id="banner_cabecalho">banner</div><div id="corpo_inteiro">	<form method="POST" action="">	<label for="txtusuario">usuário:</label> <input type="text" name="usuario" id="txtusuario size="30" /></div><div id="banner_rodape">rodapé</div></body></html>

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