Centralization of IVD

Asked

Viewed 71 times

0

How do I center these two bottom Ivs?

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

css

  • How do you want to center? You want to center them one on the other side in the middle, one below the other or one on the other?

  • May you two stand in the middle side by side.

3 answers

1

Here is an example to center a div vertically and horizontally: 

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

1

I did 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, that one div is the one that will align the elements within it with the text-align: center;.

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

  • Well, as you can see in my code, I am using 4 'Divs', in case one will be the 'div' that houses all the others that would be 'content' and the others are organized as up, Esq, dir. Your method I am already using but it does not solve the problem of centralization, of the two lower Ivds.

  • You can post the HTML code as well?

  • I inserted it in the other answer.

1


Well, solved the problem poses 'margin-left' and 'margin-right', continues the problem of not adapting to all monitors, only to mine, but I believe this is a question not related to this question.

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>

Browser other questions tagged css

You are not signed in. Login or sign up in order to post.