Tips for aligning a div underneath another div in a centered position

I am attempting to align .rij_lessenrooster below .rij_weekdagen so that it is centered under each day. The teacher advised me to create a column and then try it, but it did not resolve the alignment issue. The .rij_weekdagen consistently appears off to the right. I also experimented with using position properties, but it did not produce the desired outcome. Trying to use justify-content: space-around for .rij_lessenrooster only worsened the misalignment.

.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">Monday</div>
    <div class="weekdag">Tuesday</div>
    <div class="weekdag">Wednesday</div>
    <div class="weekdag">Thursday</div>
    <div class="weekdag">Friday</div>
  </div>
  <div class="rij_lessenrooster">
    <div class="uur_container">
      <div class="uur">
        <div class="boven">8:25 AM</div>
      </div>
      <div class="uur">
        <div class="boven">9:15 AM</div>
        <div class="beneden">10:05 AM</div>
      </div>
    </div>
    <div class="vak uur_2">
      <div class="uur_1 nederlands">
        <span class="vaknaam">Dutch</span><br> Verheyen
        <br> Room 207
      </div>
      <div class="uur_1 history">
        <span class="vaknaam">History</span><br> De Coster<br> Room 207
      </div>
    </div>
    <div class="vak uur_2 french">
      <span class="vaknaam">French</span><br> Heylen
      <br> Room 207
    </div>
    <div class="vak uur_2">&nbsp;</div>
    <div class="vak uur_2 math">
      <span class="vaknaam">Math</span><br> Awadhpersad
      <br> Room 204
    </div>
    <div class="vak uur_2 math">
      <span class="vaknaam">Math</span><br> Awadhpersad
      <br> Room 207
    </div>
  </div>
  <div class="rij_lessenrooster">
    <div class="uur_container">
      <div class="uur">
        <div class="boven">10:20 AM</div>
      </div>
      <div class="uur">
        <div class="boven">11:10 AM</div>
      </div>
    </div>
    <div class="vak uur_2 lbv">
      <span class="vaknaam">LBV</span><br> Claes
      <br> NCZ
      <br> Room 110
    </div>
    <div class="vak uur_2 lbv">
      <span class="vaknaam">LBV</span><br> Maes
      <br> KG
      <br> Room 210
    </div>
    <div class="vak uur_2 lbv">
      <span class="vaknaam">LBV</span><br> V. Exa.<br> Islam
      <br> Room 207
    </div>
    <div class="vak uur_2 lbv">
      <span class="vaknaam">LBV</span><br> D. Pile.<br> PG
      <br> Room 202
    </div>
    <div class="vak uur_2 dutch">
      <span class="vaknaam">Dutch</span><br> Verheyen
      <br> Room 207
    </div>
    <div class="vak uur_2 information_technology">
      <span class="vaknaam">Info Tech</span><br> Leys
      <br> Room 109
    </div>
    <div class="vak uur_2 information_technology">
      <span class="vaknaam">Info Tech</span><br> Mertens
      <br> Room 109
    </div>
    <div class="vak uur_2 information_technology">
      <span class="vaknaam">Info Tech</span><br> Mertens
      <br> Room 109
    </div>
  </div>
  <div class="middagpauze">
    <div class="uur_container">
      <div class="uur">
        <div class="boven">12:00 PM</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">1:00 PM</div>
      </div>
      <div class="uur">
        <div class="boven">1:50 PM</div>
        <div class="beneden">2:40 PM</div>
      </div>
    </div>
    <div class="vak uur_2 physical_education">
      <span class="vaknaam">Physical Education</span><br> Riské
      <br> Gymnasium 1
    </div>
    <div class="vak uur_2 math">
      <span class="vaknaam">Math</span><br> Awadhpersad
      <br> Room 207
    </div>
    <div class="vak uur_2">&nbsp;</div>
    <div class="vak uur_2 information_technology">
      <span class="vaknaam">Info Tech</span><br> Mertens
      <br> Room 109
    </div>
    <div class="vak uur_2">
      <div class="uur_1 french">
        <span class="vaknaam">French</span><br> Heylen
        <br> Room 207
      </div>
      <div class="uur_1 geography">
        <span class="vaknaam">Geography</span><br> Engelen
        <br> Room 207
      </div>
    </div>
  </div>
  <div class="rij_lessenrooster">
    <div class="uur_container">
      <div class="uur">
        <div class="boven">2:55 PM</div>
      </div>
      <div class="uur">
        <div class="boven">3:45 PM</div>
        <div class="beneden">4:35 PM</div>
      </div>
    </div>
    <div class="vak uur_2 information_technology">
      <span class="vaknaam">Info Tech</span><br> Leys
      <br> Room 109
    </div>
    <div class="vak uur_2 information_technology">
      <span class="vaknaam">Info Tech</span><br> Leys
      <br> Room 109
    </div>
    <div class="vak uur_2">&nbsp;</div>
    <div class="vak uur_2 english">
      <span class="vaknaam">English</span><br> Tack
      <br> Room 207
    </div>
    <div class="vak uur_1 cv2">
      <span class="vaknaam">CV2</span><br> Mertens
      <br> Room 23
    </div>
  </div>
</div>

htmlcssflexbox

Answer №1

Apply the style justify-content: space-around; to the element with class .rij_lessenrooster and ensure that the child divs are full-width while centering the text.

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">Monday</div>
    <div class="weekdag">Tuesday</div>
    <div class="weekdag">Wednesday</div>
    <div class="weekdag">Thursday</div>
    <div class="weekdag">Friday</div>
  </div>
  <div class="rij_lessenrooster">
    <div class="hour_container">
      <div class="hour">
        <div class="top">8:25 AM</div>
      </div>
      <div class="hour">
        <div class="top">9:15 AM</div>
        <div class="bottom">10:05 AM</div>
      </div>
    </div>
    <div class="subject hour_2">
      <div class="hour_1 english">
        <span class="subject_name">English</span><br> Smith
        <br> Room 207
      </div>
      <div class="hour_1 history">
        <span class="subject_name">History</span><br> Johnson<br> Room 207
      </div>
    </div>
    <div class="subject hour_2 french">
      <span class="subject_name">French</span><br> Brown
      <br> Room 207
    </div>
    <div class="subject hour_2 math">
      <span class="subject_name">Math</span><br> Davis
      <br> Room 204
    </div>
    <div class="subject hour_2 math">
      <span class="subject_name">Math</span><br> Davis
      <br> Room 207
    </div>
  </div>
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Styles in CSS for the first column of a table, with the exception of the first cell in

Here is the HTML code for a table: <table class='census'> <tr> <th colspan="2">My Title</th> </tr> <tr> <td colspan="2" class='chart'><SOME PIE CHART, GENERATED W ...

csscss-selectorshtml-tablefixed-width

The pre tag does not have any effect when added after the onload event

I have been experimenting with a jQuery plugin for drawing arrows, detailed in this article. When using the plugin, this code is transformed: <pre class="arrows-and-boxes"> (Src) > (Target) </pre> into this format: Src --> Target The is ...

javascriptjquerycsspre

Tips for detecting HTML updates using Python requests

My goal is to monitor a page for updates while maintaining the same session and cookies, without sending a completely new request. How can I determine if there are HTML updates within my current request? The page will redirect but keep the same URL. This ...

pythonhtmlhttppython-requestspython-requests-html

passing a javascript variable to html

I am facing an issue with two files, filter.html and filter.js. The file filter.html contains a div with the id "test", while the file filter.js has a variable named "finishedHTML." My objective is to inject the content of "finishedHTML" into the test div ...

javascripthtmlcssvariables

What is the best way to incorporate animation using Tailwind CSS within my Next.js project?

I have a challenge with placing three images in a circular path one after the other using Tailwind CSS for styling. I've identified the circular path and keyframe style for the images. How do I configure this style in my Tailwind config file and imple ...

javascriptcssreactjscss-animationstailwind-css

Ways to layer two divs on each other and ensure button functionality is maintained

In the process of developing a ReactJS project, I encountered the challenge of overlapping my search bar autocomplete data with the result div located directly below it. For a more detailed understanding, please take a look at the provided image. Here&apo ...

javascriptreactjscss

Distinguish the disparities between mobile and desktop devices

I need a solution for adjusting the layout of a component based on the device it is viewed on. For mobile devices, I want the content to stack vertically like in this example: https://codesandbox.io/s/material-demo-forked-ktoee?file=/demo.tsx. However, o ...

cssreactjsmaterial-uijss

Removing the blue border around a button upon being clicked

Whenever I press my button, an unexpected event occurs. Is there a solution to avoid this issue? Thank you for your help! :) ...

htmlcssstyles

The CSS cubic-bezier fails to smoothly transition back to its initial position

I created an animation that works perfectly when hovering over the target elements, however, it doesn't smoothly transition back to its original position when the cursor moves outside of the target element. Instead, it snaps back abruptly and unattrac ...

cssanimationtransition

I am experiencing issues with the functionality of the jQuery function

I am currently diving into the world of jquery. I put together a script, but unfortunately it's not functioning as expected. 1 Here is a snippet of my HTML code <ul id="recur" class="elasticstack"> <li id=<?=$item['id']?> ...

phpjqueryhtml

Tips for positioning a text link alongside an image link within a table row using only inline styles

I am struggling to align text and an image link next to each other within a table row. The image keeps moving up and down despite my efforts to use various alignment and display block styles. I am only able to use inline CSS and need it to display correctl ...

htmlcssemailoutlook

How to Show an Image in a Search Bar Using HTML

As I put the finishing touches on this table, I decided to add a search function to it. However, I encountered an issue with the search bar design. I wanted to incorporate a search icon png file as the background image, similar to the example showcased on ...

htmlcss

Optimizing web layouts to fit on a single page is the most effective

Struggling to create a print layout for my web page that seamlessly transitions from the digital realm to the physical world. Utilizing HTML and CSS has presented challenges in aligning the "digital" design with a "real printable" page due to uncertainties ...

htmlcssprinting

External CSS file unable to load background image as referenced

I am facing an issue with this code in my external CSS file as it doesn't seem to work at all. Strangely, when I move it internally, everything functions perfectly. Any thoughts on what could be causing this discrepancy? html { background-image:url(i ...

htmlcssrelative-path

Do external JavaScript files exclusively serve as repositories for functions?

Hey there, I'm a beginner in Web Development and I have a question that might sound silly: If I decide to keep my scripts in an external .js file, would it essentially just serve as a container for functions? For instance, if I attempt to include cod ...

javascripthtmlfunctionmoduleexternal

Tips for preventing users from entering special characters into input fields

How can I prevent users from entering the # character into an HTML input field? I attempted to use the pattern attribute, but it does not seem to be effective. I included this pattern in my input element: pattern="[^-#]+" I expected that this would disa ...

javascripthtml

The Next.js Image component does not implement the maxWidth attribute

<Image src="/assets/blog/image.webp" style={{ maxWidth: "700px" }} width={1400} height={1400} /> Issue Detected The image with src '/assets/blog/image.webp' has the following styles applied, but they are being overwrit ...

cssreactjsnext.js

Exploring the functions of Safari input types: search, reset, and normalize

Is there a proper way to reset the appearance of a search input so that it resembles a text field in Safari? screenshot I'm experiencing an issue with Safari where there is unwanted padding on the left side of the search input that I can't seem ...

css

Cut out a passage by using a polyline shape

I am looking to create a unique effect by clipping a text like a heading1 using an svg polyline. The concept is to place the H1 text behind the polyline background and make it appear frosted or blurred. I have successfully achieved this in the past but see ...

csssvg

Utilize the serialized data to pre-fill the form fields

After using the serialize() function on my form and saving the string, I am now looking for a function that can repopulate values back into the form from the serialized string. Is there such a function available? ...

javascriptjqueryhtmlwebforms