Блог

Главная - Вопросы по программированию - Как поместить div под другим div, чтобы он был центрирован

Как поместить div под другим div, чтобы он был центрирован

#html #css #flexbox

Вопрос:

Я пытаюсь поместить .rij_lessenrooster .rij_weekdagen его так, чтобы он был центрирован под каждым днем. Учитель сказал мне создать столбец, а затем попробовать его, но это ни в чем не помогло. .rij_weekdagen Всегда справа. Я также пытался сделать это с помощью position, но это ни к чему не привело. Я пытался вставить .rij_lessenrooster justify-content: space-around ; но тогда это еще больше.

 .klasnaam {
  text-align      : center;
  font-weight     : bold;
  }
.rij_lessenrooster {
  display         : flex;
  flex-direction  : row;
  justify-content : space-between;
  align-items     : center;
  }
.rij_weekdagen {
  display         : flex;
  flex-direction  : row;
  justify-content : space-around;
  border-bottom   : 1px solid;
  }
.boven {
  display         : flex;
  flex-direction  : column;
  margin-bottom   : 60px;
  } 
 <div class="container">
  <div class="klasnaam">5I</div>
  <div class="rij_weekdagen">
    <div class="weekdag">Maandag</div>
    <div class="weekdag">Disndag</div>
    <div class="weekdag">Woensdag</div>
    <div class="weekdag">Donderdag</div>
    <div class="weekdag">Vrijdag</div>
  </div>
  <div class="rij_lessenrooster">
    <div class="uur_container">
      <div class="uur">
        <div class="boven">8u25</div>
      </div>
      <div class="uur">
        <div class="boven">9u15</div>
        <div class="beneden">10u05</div>
      </div>
    </div>
    <div class="vak uur_2">
      <div class="uur_1 nederlands">
        <span class="vaknaam">Nederlands</span><br> Verheyen
        <br> 207
      </div>
      <div class="uur_1 gescheidenis">
        <span class="vaknaam">Geschiedenis</span><br> De Coster<br> 207
      </div>
    </div>
    <div class="vak uur_2 frans">
      <span class="vaknaam">Frans</span><br> Heylen
      <br> 207
    </div>
    <div class="vak uur_2">amp;nbsp;</div>
    <div class="vak uur_2 wiskunde">
      <span class="vaknaam">Wiskunde</span><br> Awadhpersad
      <br> 204
    </div>
    <div class="vak uur_2 wiskunde">
      <span class="vaknaam">Wiskunde</span><br> Awadhpersad
      <br> 207
    </div>
  </div>
  <div class="rij_lessenrooster">
    <div class="uur_container">
      <div class="uur">
        <div class="boven">10u20</div>
      </div>
      <div class="uur">
        <div class="boven">11u10</div>
      </div>
    </div>
    <div class="vak uur_2 lbv">
      <span class="vaknaam">LBV</span><br> Claes
      <br> NCZ
      <br> 110
    </div>
    <div class="vak uur_2 lbv">
      <span class="vaknaam">LBV</span><br> Maes
      <br> KG
      <br> 210
    </div>
    <div class="vak uur_2 lbv">
      <span class="vaknaam">LBV</span><br> V. Exa.<br> Islam
      <br> 207
    </div>
    <div class="vak uur_2 lbv">
      <span class="vaknaam">LBV</span><br> D. Pile.<br> PG
      <br> 202
    </div>
    <div class="vak uur_2 nederlands">
      <span class="vaknaam">Nederlands</span><br> Verheyen
      <br> 207
    </div>
    <div class="vak uur_2 infromatica">
      <span class="vaknaam">TI-info</span><br> Leys
      <br> 109
    </div>
    <div class="vak uur_2 infromatica">
      <span class="vaknaam">TI-info</span><br> Mertens
      <br> 109
    </div>
    <div class="vak uur_2 infromatica">
      <span class="vaknaam">TI-info</span><br> Mertens
      <br> 109
    </div>
  </div>
  <div class="middagpauze">
    <div class="uur_container">
      <div class="uur">
        <div class="boven">12u00</div>
      </div>
    </div>
    <div class="vak uur_1">amp;nbsp;</div>
    <div class="vak uur_1">amp;nbsp;</div>
    <div class="vak uur_1">amp;nbsp;</div>
    <div class="vak uur_1">amp;nbsp;</div>
    <div class="vak uur_1">amp;nbsp;</div>
  </div>
  <div class="rij_lessenrooster">
    <div class="uur_container">
      <div class="uur">
        <div class="boven">13u00</div>
      </div>
      <div class="uur">
        <div class="boven">13u50</div>
        <div class="beneden">14u40</div>
      </div>
    </div>
    <div class="vak uur_2 lichamelijke_opvoeding">
      <span class="vaknaam">Lichamelijke opvoeding</span><br> Riské
      <br> turnzaal 1
    </div>
    <div class="vak uur_2 wiskunde">
      <span class="vaknaam">Wiskunde</span><br> Awadhpersad
      <br> 207
    </div>
    <div class="vak uur_2">amp;nbsp;</div>
    <div class="vak uur_2 infromatica">
      <span class="vaknaam">TI-info</span><br> Mertens
      <br> 109
    </div>
    <div class="vak uur_2">
      <div class="uur_1 frans">
        <span class="vaknaam">Frans</span><br> Heylen
        <br> 207
      </div>
      <div class="uur_1 aardrijkskunde">
        <span class="vaknaam">Aardrijkskunde</span><br> Engelen
        <br> 207
      </div>
    </div>
  </div>
  <div class="rij_lessenrooster">
    <div class="uur_container">
      <div class="uur">
        <div class="boven">14u55</div>
      </div>
      <div class="uur">
        <div class="boven">15u45</div>
        <div class="beneden">16u35</div>
      </div>
    </div>
    <div class="vak uur_2 infromatica">
      <span class="vaknaam">TI-info</span><br> Leys
      <br> 109
    </div>
    <div class="vak uur_2 infromatica">
      <span class="vaknaam">TI-info</span><br> Leys
      <br> 109
    </div>
    <div class="vak uur_2">amp;nbsp;</div>
    <div class="vak uur_2 engels">
      <span class="vaknaam">Engels</span><br> Tack
      <br> 207
    </div>
    <div class="vak uur_1 cv2">
      <span class="vaknaam">CV2</span><br> Mertens
      <br> 23
    </div>
  </div>
</div>

Ответ №1:

Установите justify-content: space-around; on .rij_lessenrooster и установите базовые divs на полную ширину и центрируйте текст.

https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content

 .klasnaam {
  text-align: center;
  font-weight: bold;
}
.rij_lessenrooster {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
}

.rij_lessenrooster div {
   width: 100%;
   text-align: center;
   border-right: 1px solid;
}
.rij_weekdagen {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  border-bottom: 1px solid;
}
.boven {
  display: flex;
  flex-direction: column;
  margin-bottom: 60px;
}
  
.weekdag {
  width: 100%;
  text-align: center;
  border-right: 1px solid;
} 
 <div class="container">
  <div class="klasnaam">5I</div>
  <div class="rij_weekdagen">
    <div class="weekdag">Maandag</div>
    <div class="weekdag">Disndag</div>
    <div class="weekdag">Woensdag</div>
    <div class="weekdag">Donderdag</div>
    <div class="weekdag">Vrijdag</div>
  </div>
  <div class="rij_lessenrooster">
    <div class="uur_container">
      <div class="uur">
        <div class="boven">8u25</div>
      </div>
      <div class="uur">
        <div class="boven">9u15</div>
        <div class="beneden">10u05</div>
      </div>
    </div>
    <div class="vak uur_2">
      <div class="uur_1 nederlands">
        <span class="vaknaam">Nederlands</span><br> Verheyen
        <br> 207
      </div>
      <div class="uur_1 gescheidenis">
        <span class="vaknaam">Geschiedenis</span><br> De Coster<br> 207
      </div>
    </div>
    <div class="vak uur_2 frans">
      <span class="vaknaam">Frans</span><br> Heylen
      <br> 207
    </div>
    <div class="vak uur_2 wiskunde">
      <span class="vaknaam">Wiskunde</span><br> Awadhpersad
      <br> 204
    </div>
    <div class="vak uur_2 wiskunde">
      <span class="vaknaam">Wiskunde</span><br> Awadhpersad
      <br> 207
    </div>
  </div>
</div>
Метки: ,