html - 如何将 div 放在另一个 div 下，使其居中

Question

我试图把它放在.rij_lessenrooster下面，.rij_weekdagen所以它每天都集中在下面。老师让我做个专栏，然后试试，但没有任何帮助。.rij_weekdagen总是在右边。我也试图用位置来做这件事，但它没有任何作用。我试着放进去.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">&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">&nbsp;</div>
    <div class="vak uur_1">&nbsp;</div>
    <div class="vak uur_1">&nbsp;</div>
    <div class="vak uur_1">&nbsp;</div>
    <div class="vak uur_1">&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">&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">&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>

标签： htmlcssflexbox

Answer 1

设置justify-content: space-around;并将.rij_lessenrooster底层 div 设置为全角并使文本居中。

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>