Conteúdo não respeita o que está no CSS.

Jeferson Ferreira Lemos · 10 de julho de 2017

	<style>

html, body 
	{
	width: 100%;
	height: 100%;
	margin: 0 auto;
	}

body 
	{
	font-size: 20px;
	text-align: center;
	}


.height60
	{
	height: 60vh;
	text-align: center;
	color: #FFFFFF;
	}

.height60
	{
	background-image:url(fundo.png);
	background-size: cover;
	background-repeat: no-repeat;
	background-attachment: fixed;
	}

.height40
	{
	height: 40vh;
	color: #FFFFFF;
	text-align: center;
	vertical-align: middle;	
	}

.height40
	{
	background-image:url(fundo.jpg);
	background-size: cover;
	background-repeat: no-repeat;
	background-attachment: fixed;
	}
	
header
	{
	text-align: center;
	vergical-align: middle;
	}


header 
	{
	background-image: linear-gradient(to bottom, black, black, silver 100%);
	color: #FFFFFF;
	font-family: 'Elephant', Verdana;
	display: table;
	width: 100%;
	}


.container 
	{
	padding: 2%;
	display: table;
	}

.container2
	{
	padding: 6%;
	display: table-cell;
	}

#botão
	{
	border-radius: 5px;
	color: red;
	font-size="15"
	font-family: verdana;
	background:url('fundo.jpg');
	width: 100px;
	height: 20px;
	}



	</style>

Estou com uma dificuldade nesta página de testes: Coloquei para os elementos ficarem posicionados ao centro, tanto na vertical quanto horizontal, mas em algum momento eles bugaram na esquerda e não consegui arrumar.

Paulo_silver · 10 de julho de 2017

Boa tarde colega, não me lembro muito de CSS pois deve fazer uns 3 anos desdo do ultimo que precisei fazer, tente usar.

margin:0;

padding:0;

Complementando, fuçando aqui achei um exemplo que talvez ajude

<html xmlns=‘http://www.w3.org/1999/xhtml’> 
  <head> 
    <style type="text/css"> 
      body { 
        margin:0; 
        padding:0; 
        background:#ccc; 
        text-align:center; 
      } 
      
      #pagina { 
        width: 760px; 
        margin:0 auto;           
        padding: 10px; 
        text-align:left; 
      } 

      #conteudo { 
        padding: 5px; 
        background-color: #eee;
	text-align:center;  
      } 
    </style> 
  </head> 
  <body> 
    <div id="pagina"> 
      <div id="conteudo"> 
        <h1>Página centralizada</h1> 
        <p> Conteúdo da página centralizada.</p> 
      </div> 
    </div> 
  </body> 
</html>

Boa sorte e bom estudo.

DiF · 10 de julho de 2017

@Jeferson Ferreira Lemos

Basicamente você se você quer centralizar o elemento que contem os dados, use o margin: 0 auto.

Mas use ele somente no elemento que engloba o "todo" .

Existe outros métodos como :

http://www.maujor.com/tutorial/centralizando-com-css-um-guia-completo.php

https://tableless.com.br/centralizando-um-objeto-na-horizontal-e-vertical-com-css/

navegantenarede · 11 de julho de 2017

Veja essa referência referência para a centralização de coisas no CSS pela W3C, que mostra diferentes formas de centralizar: https://www.w3.org/Style/Examples/007/center.pt_BR.html.