Alignment of div to the center of another div

Asked

Viewed 43 times

2

I have 2 div’s, a div is the main one, and inside this div I have another that contains 1 graph as the image shows.

I need to put the graph div to the center of the main div, how can I do that?

inserir a descrição da imagem aqui 

.caixaAlertasMobile{
    width:18%; 
    background:#ED4C4C; 
    box-shadow: 0px 5px 25px #52575D1A; 
    border-radius: 20px;font-family: 'Rajdhani', sans-serif;
    width: 48%;
}

.c10000 {
    position: relative;
    font-size: 120px;
    width: 1em;
    height: 1em;
    border-radius: 50%;
    float: left;
    background-color: transparent;
}

.c10000 > span {
    position: absolute;
    width: 100%;
    z-index: 1;
    left: -12px;
    top: -15px;
    width: 5em;
    line-height: 5em;
    font-size: 0.2em;
    color: #cccccc;
    display: block;
    text-align: center;
    white-space: nowrap;
    -webkit-transition-property: all;
    -moz-transition-property: all;
    -o-transition-property: all;
    transition-property: all;
    -webkit-transition-duration: 0.2s;
    -moz-transition-duration: 0.2s;
    -o-transition-duration: 0.2s;
    transition-duration: 0.2s;
    -webkit-transition-timing-function: ease-out;
    -moz-transition-timing-function: ease-out;
    -o-transition-timing-function: ease-out;
    transition-timing-function: ease-out;
}

.c10000 .slice {
    position: absolute;
    width: 1em;
    height: 1em;
    clip: rect(0em, 1em, 1em, 0.5em);
}
 
.c10000:after {
    position: absolute;
    top: 0.08em;
    left: 0.08em;
    display: block;
    content: " ";
    border-radius: 50%;
    background-color: #ed4c4c;
    width: 0.84em;
    height: 0.84em;
    -webkit-transition-property: all;
    -moz-transition-property: all;
    -o-transition-property: all;
    transition-property: all;
    -webkit-transition-duration: 0.2s;
    -moz-transition-duration: 0.2s;
    -o-transition-duration: 0.2s;
    transition-duration: 0.2s;
    -webkit-transition-timing-function: ease-in;
    -moz-transition-timing-function: ease-in;
    -o-transition-timing-function: ease-in;
    transition-timing-function: ease-in;
    border: 1px solid #ED7A7B;
    border-style: double;
}
<div class="caixaAlertasMobile">
  <p class="tituloCaixa">A Receber</p>
  <div class="row">
    <div class="col-md-12">
      <p class="subtituloCaixa">Total a receber:</p>
      <p class="valorCaixa"><span style="font-size: 21px;">€</span><?=number_format($receber, 2, '.', '')?></p>
      <p class="faltaCaixa"><span class="pendenteCaixa">Pendente: </span><span style="font-size: 15px">€</span><?=number_format($pendenteReceber, 2, '.', '')?></p>
    </div>
    <div class="col-md-12">	
      <div style="font-size:75px;margin-top:10px;" class="c10000 p<?=round($graficoReceber)?> small"> 
        <span style="color:#333333;font-weight: 700; font-family: Rajdhani, sans-serif; font-size: 21px;"><?=round($graficoReceber)?>%</span> 
        <div class="slice">
          <div class="bar"></div>
          <div class="fill"></div>
        </div>
      </div>
    </div>	
  </div>
</div>

html css bootstrap-4

  • Are you using Bootstrap? Which version?

  • yes, I’m using Bootsrap 4

2 answers

3


First if you want to line up in the center is good you take this float:left, then as you have a div internal daughter who you defined the width in px, Simply place the native Bootstrap class to center horizontally mx-auto

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <title>Page Title</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" type="text/css" media="screen" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.2/css/all.min.css" />
  <link rel="stylesheet" type="text/css" media="screen" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" />
  <style>
    html,
    body {
      width: 100%;
      height: 100%;
      margin: 0;
      padding: 0;
    }
  
  
  
    .caixaAlertasMobile {
      width: 18%;
      background: #ED4C4C;
      box-shadow: 0px 5px 25px #52575D1A;
      border-radius: 20px;
      font-family: 'Rajdhani', sans-serif;
      width: 48%;
    }
  
    .c10000 {
      position: relative;
      font-size: 120px;
      width: 1em;
      height: 1em;
      border-radius: 50%;
      /* float: left; */
      background-color: transparent;
    }
  
    .c10000 > span {
      position: absolute;
      width: 100%;
      z-index: 1;
      left: -12px;
      top: -15px;
      width: 5em;
      line-height: 5em;
      font-size: 0.2em;
      color: #cccccc;
      display: block;
      text-align: center;
      white-space: nowrap;
      -webkit-transition-property: all;
      -moz-transition-property: all;
      -o-transition-property: all;
      transition-property: all;
      -webkit-transition-duration: 0.2s;
      -moz-transition-duration: 0.2s;
      -o-transition-duration: 0.2s;
      transition-duration: 0.2s;
      -webkit-transition-timing-function: ease-out;
      -moz-transition-timing-function: ease-out;
      -o-transition-timing-function: ease-out;
      transition-timing-function: ease-out;
    }
  
  
  
    .c10000 .slice {
      position: absolute;
      width: 1em;
      height: 1em;
      clip: rect(0em, 1em, 1em, 0.5em);
    }
  
    .c10000:after {
      position: absolute;
      top: 0.08em;
      left: 0.08em;
      display: block;
      content: " ";
      border-radius: 50%;
      background-color: #ed4c4c;
      width: 0.84em;
      height: 0.84em;
      -webkit-transition-property: all;
      -moz-transition-property: all;
      -o-transition-property: all;
      transition-property: all;
      -webkit-transition-duration: 0.2s;
      -moz-transition-duration: 0.2s;
      -o-transition-duration: 0.2s;
      transition-duration: 0.2s;
      -webkit-transition-timing-function: ease-in;
      -moz-transition-timing-function: ease-in;
      -o-transition-timing-function: ease-in;
      transition-timing-function: ease-in;
      border: 1px solid #ED7A7B;
      border-style: double;
    }
  </style>
  </head>
  
  <body>
  
    <div class="caixaAlertasMobile">
      <p class="tituloCaixa">A Receber</p>
      <div class="row">
        <div class="col-md-12">
          <p class="subtituloCaixa">Total a receber:</p>
          <p class="valorCaixa"><span style="font-size: 21px;">€</span><?=number_format($receber, 2, '.', '')?></p>
          <p class="faltaCaixa"><span class="pendenteCaixa">Pendente: </span><span style="font-size: 15px">€</span><?=number_format($pendenteReceber, 2, '.', '')?></p>
        </div>
        <div class="col-md-12">
          <div style="font-size:75px;margin-top:10px;" class="c10000 mx-auto p<?=round($graficoReceber)?> small">
            <span style="color:#333333;font-weight: 700; font-family: Rajdhani, sans-serif; font-size: 21px;"><?=round($graficoReceber)?>%</span>
            <div class="slice">
              <div class="bar"></div>
              <div class="fill"></div>
            </div>
          </div>
        </div>
      </div>
    </div>
  
  <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
</body>
</html>

-1

Set a height for the parent div and work with display: flex. I used as example 800px.

.caixaAlertasMobile {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  height: 800px;
}

  • didn’t work for me the way I wanted

  • I edited the question because I saw that some graphics css was missing

Browser other questions tagged html css bootstrap-4

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