0

Como faço para centralizar essas duas divs de baixo?

inserir a descrição da imagem aqui

#content{
    position:relative;
    height: 80%;
    width: 85%;
    margin-top: 1%;
}

#uphist{
    text-align: justify;
    padding-top: 2%;
    height:30%;
    width:80%;
    margin-left: auto;
    margin-right: auto;
}

#esqhist{
    background-color: red; /* EXCLUIR */
    height:60%;
    width:50%;
    float:left;
    margin-left: auto;
}

#dirhist{
    background-color: aqua; /* EXCLUIR */
    text-align: justify;
    height:60%;
    width:30%;
    float:right;
    margin-right: auto;
}

2
  • Como você quer centralizar? Quer centralizar elas uma do lado da outra no meio, uma abaixo da outra ou uma sobre a outra?
    – Willian
    Commented 25/11/2016 às 17:27
  • Que as duas fiquem no meio uma ao lado da outra. Commented 25/11/2016 às 17:33

3 Respostas 3

1

Eu fiz um exemplo para alinhar as divs.

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style type="text/css">
        .divMain{
            width: 600px;
            height: 800px;
            background-color: black;
            text-align: center;
        }
        .divDireita{
            width: 40%;
            height: 30%;
            background-color: red;
            display: inline-block;
        }

        .divEsquerda{
            width: 30%;
            height: 30%;
            background-color: blue;
            display: inline-block;
        }
    </style>    
</head>
<body>
    <div class="divMain">
        <div class="divDireita"></div>
        <div class="divEsquerda"></div>
    </div>
</body>
</html>

Explicando um pouco do código. Eu criei uma div com a classe divMain, essa div é a que irá alinhar os elementos dentro dela com o text-align: center;.

Como sugestão eu criaria uma div com essa propriedade com as duas divs dentro

3
  • Bom, como pode observar no meu código, estou utilizando 4 'divs', no caso uma será a 'div' que abriga todas as outras que seria a 'content' e as outras estão organizadas como up, esq, dir. O seu método já estou utilizando porém ele não resolve o problema da centralização, das duas 'divs' inferiores. Commented 25/11/2016 às 17:50
  • Tem como você postar o código Html também?
    – Willian
    Commented 25/11/2016 às 17:52
  • Inseri na outra resposta. Commented 25/11/2016 às 19:40
1

Segue ume exemplo para centralizar uma div na na vertical e horizontal:

 .centro {
          position:absolute;
          top: 50%;
          left: 50%;
          width:200px;
          height: 200px;
          margin-top: -100px;
          margin-left: -100px;
          border: solid 1px;
          background: grey;
  }
<div class="centro"></div>

Agora pra centralizar numa div as duas colunas pode ser:

.segura {
      max-width:800px;
      margin:auto;
      border: solid 1px;
      text-align: center;
  }

  .esq {
       display: inline-block;
       width:45%;
       border: solid 1px red;
       min-height: 250px;
   }
<section class="segura">
  <div class="esq">
	Esquerda
  </div>
  <div class="esq">
	Direita
 </div>
</section>

1

Bom, resolvi o problema coloca 'margin-left' e 'margin-right', continua o problema de não se adaptar a todos monitores, apenas ao meu, mas acredito que está seja uma questão não referente à está pergunta.

inserir a descrição da imagem aqui

    #content{
        position:relative;
        height: 80%;
        width: 85%;
        margin-top: 1%;
    }

    #uphist{
        text-align: justify;
        padding-top: 2%;
        height:30%;
        width:80%;
        margin-left: auto;
        margin-right: auto;
    }

    #esqhist{
        display: inline-block;
        background-color: red; /* EXCLUIR */
        height:60%;
        width:50%;
        float:left;
        margin-left: 9%;
    }

    #dirhist{
        display: inline-block;
        background-color: aqua; /* EXCLUIR */
        text-align: justify;
        height:60%;
        width:30%;
        float:right;
        margin-right: 10%;
    }

    #imgmap{
        display: flex;
        margin: auto;
        width: 95%;
        height: 95%;
    }
            <div id="content">
                <div id="uphist">
                    <h2>O Enredo:</h2>
                    <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                    <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                </div>
                <div id="esqhist">
                    <img src="imgs/mapa.png" id="imgmap" alt="mapa do reino de synph">
                </div>
                <div id="dirhist">
                    <h2>O Cenário:</h2>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                </div>
            </div>

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .