Ir para conteúdo

Arquivado

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

Eduardo Zanela

Centralizar elementos ARTICLE dentro de uma DIV

Recommended Posts

Olá pessoal!!



Sou novo aqui e sou novo com html/css e estou com uma duvida de como posso centralizar um elemento <article> dentro de uma <div>



obs: gostaria que ficassem mais de um article na mesma linha



segue abaixo os codigos html e css



<div id="wrap">
<article id="empresa">
<h1>AgroSky</h1><br>
<p>Como uma das maiores empresas do segmento de aviação agrícola a AgroSky conta com
pilotos altamente treinados e preparados, uma frota com a tecnologia mais avançada do segmento e com a
manutenção em dia para a atender a demanda de serviço. Conta ainda com técnicos e
engenheiros Agrícolas especializados na área de aplicação de fertilizantes e agrotóxicos.</p><br>
<h2><a href='servicos.html'>Serviços</a></h2><br>
<ul>
<li>Aplicação de Defencivos
<li>Fertilização e Adubação
<li>Semeadura Aérea
</ul><br>
<p>Entre na <a href="servicos.html" class="inicio">Pagina de Serviços</a> e confira um video da atuação da empresa na aplicação de defensivos.</p>
</article>
<article id="empresa">
<h1>AgroSky</h1><br>
<p>Como uma das maiores empresas do segmento de aviação agrícola a AgroSky conta com
pilotos altamente treinados e preparados, uma frota com a tecnologia mais avançada do segmento e com a
manutenção em dia para a atender a demanda de serviço. Conta ainda com técnicos e
engenheiros Agrícolas especializados na área de aplicação de fertilizantes e agrotóxicos.</p><br>
<h2><a href='servicos.html'>Serviços</a></h2><br>
<ul>
<li>Aplicação de Defencivos
<li>Fertilização e Adubação
<li>Semeadura Aérea
</ul><br>
<p>Entre na <a href="servicos.html" class="inicio">Pagina de Serviços</a> e confira um video da atuação da empresa na aplicação de defensivos.</p>
</article>
</div>


body{
background-color: #D3D3D3;
}

#wrap{
background-color: rgba(255, 255, 255, 0.7);
width: 80%;
margin: 30px auto;
text-align: center;
position: relative;

}
#empresa{
background-color: rgba(255, 255, 255, 0.7);
margin-right: 2%;
box-shadow: 0px 0px 10px rgba(0,0,0,0.5);
width: 40%;
float: left;
margin-bottom: 3%;
padding: 1%;
text-align: justify;
border-top: 10px solid forestgreen;
}
#empresa:last-child {
margin-right: 0%;
}

Desculpem a bagunça do codigo é que estou começando mesmo e o problema é que o article nao fica centralizado dentro da div.



E se algem tiver um tuto sobre responsividade e se puderem me ajudar ficarei muito agradecido.



Obrigado!!!


Compartilhar este post


Link para o post
Compartilhar em outros sites

Não entendi muito bem como você quer essa centralização.

Mas já podemos notar um erro grande nisso aí: duas IDs iguais. Quando você utiliza ID para identificar um elemento, ele tem que ser único. No caso, você utilizou duas IDs #Empresa, o que não pode!! Se você precisa criar vários elementos iguais, utilize uma classe.

Compartilhar este post


Link para o post
Compartilhar em outros sites

Primeiramente, você não deveria ter 2 elementos distintos utilizando o mesmo ID.
Você deve usar class quando tiver mais de um elemento para compartilhar as mesmas propriedades.

Exemplo=

<div id="wrap">
	<article [color=#ff0000]class="empresa"[/color]>
		<h1>AgroSky</h1><br>
		<p>Como [...] agrotóxicos.</p><br>
		<h2><a href='servicos.html'>Serviços</a></h2><br>
		<ul>
			<li>Aplicação de Defencivos
			<li>Fertilização e Adubação
			<li>Semeadura Aérea
		</ul>
		<p>Entre [...] defensivos.</p>
	</article>
	<article [color=#ff0000]class="empresa"[/color]>
		<h1>AgroSky</h1><br>
		<p>Como [...] agrotóxicos.</p><br>
		<h2><a href='servicos.html'>Serviços</a></h2><br>
		<ul>
			<li>Aplicação de Defencivos
			<li>Fertilização e Adubação
			<li>Semeadura Aérea
		</ul>
		<p>Entre [...] defensivos.</p>
	</article>
</div>

Outro ponto, não utilize a tag <br /> para dar um espaço depois da <ul> ao invés disso, adicione uma margem com o css.

Você provavelmente não estava conseguindo centralizar, pois possui um 'float:left;' na propriedade empresa.
Ou seja, você estava alinhando o objeto para esquerda, não iria centralizar ele.

utilize esse css:

.empresa{
    background-color: rgba(255, 255, 255, 0.7);
    box-shadow: 0px 0px 10px rgba(0,0,0,0.5);
    width: 40%; 
    margin: 0 auto; adicione essa
    float: left; apague esta propriedade
    margin-bottom: 3%;
    padding: 1%;
    text-align: justify;
    border-top: 10px solid forestgreen;
}

Edit: Sobre o tutorial de responsive, recomendo você procurar por bootstrap ou foundation são frameworks, mas já que você está começando, vão ser um excelente pontapé! Fora que poupa seu tempo de programação.

Compartilhar este post


Link para o post
Compartilhar em outros sites

Primeiramente, você não deveria ter 2 elementos distintos utilizando o mesmo ID.

Você deve usar class quando tiver mais de um elemento para compartilhar as mesmas propriedades.

 

Exemplo=

<div id="wrap">
	<article [color=#ff0000]class="empresa"[/color]>
		<h1>AgroSky</h1><br>
		<p>Como [...] agrotóxicos.</p><br>
		<h2><a href='servicos.html'>Serviços</a></h2><br>
		<ul>
			<li>Aplicação de Defencivos
			<li>Fertilização e Adubação
			<li>Semeadura Aérea
		</ul>
		<p>Entre [...] defensivos.</p>
	</article>
	<article [color=#ff0000]class="empresa"[/color]>
		<h1>AgroSky</h1><br>
		<p>Como [...] agrotóxicos.</p><br>
		<h2><a href='servicos.html'>Serviços</a></h2><br>
		<ul>
			<li>Aplicação de Defencivos
			<li>Fertilização e Adubação
			<li>Semeadura Aérea
		</ul>
		<p>Entre [...] defensivos.</p>
	</article>
</div>

Outro ponto, não utilize a tag <br /> para dar um espaço depois da <ul> ao invés disso, adicione uma margem com o css.

 

Você provavelmente não estava conseguindo centralizar, pois possui um 'float:left;' na propriedade empresa.

Ou seja, você estava alinhando o objeto para esquerda, não iria centralizar ele.

 

utilize esse css:

.empresa{
    background-color: rgba(255, 255, 255, 0.7);
    box-shadow: 0px 0px 10px rgba(0,0,0,0.5);
    width: 40%; 
    margin: 0 auto; adicione essa
    float: left; apague esta propriedade
    margin-bottom: 3%;
    padding: 1%;
    text-align: justify;
    border-top: 10px solid forestgreen;
}

Edit: Sobre o tutorial de responsive, recomendo você procurar por bootstrap ou foundation são frameworks, mas já que você está começando, vão ser um excelente pontapé! Fora que poupa seu tempo de programação.

 

 

Obrigado!! Funcionou mesmo assim mas ainda não era o que eu queria então com uma rapida pesquisa consegui exatamente o que queria gostaria de saber se está correto como fiz

<html>
<head>
<style>
body{
background-color: #D3D3D3;
}

#wrap{
background-color: rgba(255, 255, 255, 0.7);
width: 80%;
margin: 30px auto;
position: relative;
text-align: center;

}
.empresa{
    background-color: rgba(255, 255, 255, 0.7);
    box-shadow: 0px 0px 10px rgba(0,0,0,0.5);
    width: 30%; 
    display: inline-block;
    margin: 5% 3%;
    margin-bottom: 3%;
    padding: 1%;
    text-align: justify;
    border-top: 10px solid forestgreen;
	
}

</style>
</head>
 
<body>
<div id="wrap">
	<article class="empresa">
		<h1>AgroSky</h1><br>
		<p>Como [...] agrotóxicos.</p><br>
		<h2><a href='servicos.html'>Serviços</a></h2><br>
		<ul>
			<li>Aplicação de Defencivos
			<li>Fertilização e Adubação
			<li>Semeadura Aérea
		</ul>
		<p>Entre [...] defensivos.</p>
	</article>
	<article class="empresa">
		<h1>AgroSky</h1><br>
		<p>Como [...] agrotóxicos.</p><br>
		<h2><a href='servicos.html'>Serviços</a></h2><br>
		<ul>
			<li>Aplicação de Defencivos
			<li>Fertilização e Adubação
			<li>Semeadura Aérea
		</ul>
		<p>Entre [...] defensivos.</p>
	</article>
</div>
</body>
</html>

Eu adicionei um display: inline-block na class "empresa" e na div principal adicionei text-align: center;

Agradeço a todos que me ajudaram foi de grande valia;

Compartilhar este post


Link para o post
Compartilhar em outros sites

Bom, existem diversos meios de se obter o mesmo resultado. Então, se você conseguiu, é o que conta =D

 

Apenas mais uma dica: Não utilize seu css no mesmo arquivo html/php, utilize ele em um arquivo externo.

Não sei se você colocou o css na tag <style> só para mostrar aqui, mas se não for esse o caso, recomendo que você faça um arquivo tipo "principal.css" e depois insira ele no seu arquivo html/php

Compartilhar este post


Link para o post
Compartilhar em outros sites

Na verdade coloquei so pra testar se resolveria o problema pois não estou em casa e não tenho todos os aquivos.

Mas eu tenho sim um arquivo style separado.

 

A maneira que eu achei foi possivel centralizar dois article na mesma linha dentro da div. :)

 

Obrigado!

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.