DIV Centralization [duplicate]

Question

DIV Centralization [duplicate]

Navigation

#1 by (1 votes)
#2 by (1 votes)
#3 by (1 votes)

0

How do I centralize these two low divs?

#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;
}

css

asked by anonymous 25.11.2016 / 18:18

3 answers

1

I made an example to align the 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>

Explaining some of the code. I created a div with class divMain , this div is the one that will align the elements inside it with text-align: center; .

As a suggestion I would create a div with this property with two divs in

25.11.2016 / 18:42

1

Here's an example to center a div in vertical and 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>

Now to center on a div the two columns can be:

.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>

25.11.2016 / 18:41

score 1 · Accepted Answer

Well, I solved the problem by putting 'margin-left' and 'margin-right', the problem of not adapting to all monitors is still mine, but I believe that this is a non-question.

    #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>