Solucionado (ver solução)
Solucionado
(ver solução)
7
respostas

Como alinhar o conteúdo de uma div na horizontal?

Bom dia gente.

Estou montando uma pagina de login para como estudo que está com o código abaixo.

html...

<html>
<head>
    <meta charset="utf-8">
    <title>Login</title>
    <link href='https://fonts.googleapis.com/css?family=Open+Sans:400,700,600' rel='stylesheet' type='text/css'>
    <link href='https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/estilo.css">
</head>
<body>
    <main>

        <div class="conteudo" id ="cabecalho">
            <img id="img_logo" src="img/logo.png" alt="Logo, SIAGRI">
        </div>

        <div id="plano_de_fundo">

        </div>

    </main>

    <footer class="conteudo" id = "rodape">
        <div>&copy; 2017 Siagri - Todos os direitos reservados</div>
    </footer>

</body>
</html>

css...

/* Geral */


/* TAG's */


/* Id's */

#cabecalho{
    background-color: black;
}

#plano_de_fundo{
    background-color: lightgray;
    width: 100%;
    height: 100%;
}

#rodape{
    position:fixed;
    background-color: white;
    bottom: 0;
}

/* classes */

.conteudo{
    height: 70px;
    width: 100%;
}

A minha duvida é o seguinte: eu criei a classe 'conteudo' para definir as propriedades gerais do cabeçalho e rodapé, mas eu também gostaria que todo conteúdo que estivesse dentro da classe ficasse alinhado no centro na vertical e tivesse uma margem a esquerda com um determinado valor, assim, toda vez que eu criasse uma div e colocasse ela com a classe 'conteúdo', ela herdasse essas propriedades gerais. Alguém poderia me ajudar? pois ainda me perco em algumas definições no css...

7 respostas

Bom dia Marcos. Acredito que se você colocar dessa forma irá funcionar.

.conteudo{
    height: 70px;
    margin: auto;
}

Talvez não seja a forma mais certa, porém acho que é a única que eu sei kkk. Dessa forma é necessário que o elemento pai tenha width:100%, se não, acho que não funciona como esperado.

Ehhhh... Não deu certo. Acho que vou manipular o conteúdo em vez da classe em si, mas vou continuar tentando.

Retirando o fixed do rodape ??

Outra coisa, pro seu codigo ficar mais semantico, para as definições do seu rodape,cabecalho e main com as proprias tags do html.

//estilo.css
header,main,footer{margin:10px; }
.conteudo{width:100%; height:70px}

Ai todo conteudo que voce adicionar eele ira pegar as propriedades de conteudo e ir "empurrando" pra baixo o rodape.

Neste cenario, seu cabecalho e rodape nao poderia ter as mesmas definições de conteudo, pq sao diferentes.

Ola Renan, gostei da sua solução, Mas o meu problema esta com o conteúdo dentro da div. Eu quero que eles fiquem centralizados na vertical e com margem a esquerda, e quero saber se o possível controlar o posicionamento deste conteúdo com a classe que eu criei.

<div class="conteudo" id="cabecalho">
            <img id="img_logo" src="img/logo.png" alt="Logo, SIAGRI"></div>
<footer class="conteudo" id="rodape">
        <div>&copy; 2017 SIAGRI - Todos os Direitos Reservados</div></footer>

Eu quero controlar o posicionamento da imagem e do texto com a classe 'conteúdo', pois quero aplicar esse estilo outras vezes. É possível? pois pelas minhas pesquisas estou achando mais fácil manipular diretamente o conteúdo da div, do que a div.

vc pode fazer assim pra definir uma propriedade para todo primeiro filho de conteudo e definir por exemplo uma margem do topo de 2em.

.conteudo{}
.conteudo :first-child{margin-top:2em;color:red;background-color: black;}

O problema é que sua estrutura fica "estática" criando uma dependencia de todo primeiro filho de "conteudo"; se tiver bem seguro quanto a isso, nao ha problemas ;)

solução!

A tag pai precisa estar com width e height: 100%, pra que o margin: auto funcione corretamente. Você pode colocar:

main{
    width: 100%;
    height: 100%;
}
.conteudo{
    height: 70px;
    margin: auto 0;
    margin-left:  15px;
 /*Margin automática na vertical e zero na lateral, que você pode colocar o valor que você preferir na margin-left*/
}

Ola Solon Barbosa, apliquei a sua solução e deu certo, mas tive que mexer em algumas coisas. Mas também consegui o que eu queria trabalhando com padding. Obrigado vcs Solon Barbosa e Renan Duarte.