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

Reducing Bootstrap Navigation Bar with a scrolling logo

Is there a way to make the fixed navbar shrink 50% when it starts scrolling? I've only come across text navbars, but I'm looking for one with a logo. Any suggestions would be greatly helpful. You can access the css and html from that link. ...

csstwitter-bootstrapnavbar

CSS - Issue with table cell height exceeding in Mozilla Firefox and Internet Explorer

Examining the code below <div style="border:solid 5px orange;width:400px;height:400px"> <div style="display:table;border:solid 1px red;width:100%;height:100%"> <div style="display:table-row;border:solid 1px blue"> <div sty ...

csshtmlwebcss-tables

Looking for JavaScript code that can dynamically create an HTML table from JSON data

I am in need of a javascript solution that can dynamically generate either an HTML table or a bootstrap grid layout based on a specific data structure. [ {"x":0,"y":0,"width":2,"height":1,"title":"Lorem ipsum dolor sit amet"}, {"x":2,"y":0,"width ...

javascripthtmljsongridviewgrid

Banner Text Alignment Issue: Uneven Left Alignment

Struggling to achieve consistent text alignment on a ribbon banner? Check out the issue I'm facing and see if you have any suggestions on fixing it: Link to Codepen Main issues: The first line of text appears slightly more indented on the left side ...

htmlcsstext-alignmentbannertext-align

Can the conventional HTML context menu be swapped out for a link context menu instead?

Currently, I am working on developing a custom linkbox component that is similar to the one found on this page: Here is an example of the code: export const Linkbox = ({}) => { const linkRef = useRef(null); return ( // eslint-disable-next-l ...

javascripthtmlcontextmenu

What is the best way to retrieve the parent element in jQuery when you already have the child element selected

I am working with jQuery Mobile, which automatically generates a lot of the DOM structure. The challenge I am facing is removing radio buttons without having an id for the parent div due to the HTML construction in jQuery Mobile. While I can easily targe ...

javascriptjqueryhtmldomjquery-mobile

Is there a way to rewrite HTML by substituting the parent tag with a different tag than the children's tag?

Upon retrieving HTML content from an API, I am faced with the task of processing it. Here is a snippet of the data: [ { id: 1, content: '{html...}' }, { id: 2, content: '{html...}' } ] A ...

jqueryhtmlcheerio

Using jQuery Accordion within the MVC Framework

I'm new to MVC and considering using an accordion. However, I'm facing issues as the accordion does not appear despite adding all necessary references for jquery accordion and creating the div. Here is my code: @{ ViewBag.Title = "Online Co ...

javascriptjqueryhtmlcssasp.net-mvc

Homepage divided in two sections akin to the Tumblr landing page

Have you ever visited www.tumblr.com and noticed the '30 reasons...' link on the registration page that slides up and reveals a second page? I've been trying to figure out how they achieve this cool effect. Most tutorials show how to scroll ...

javascriptjqueryhtmlcss

Incorporating A Full-Fledged Office Word Editor Into My Web Application

In our web project, we are looking to integrate a feature that allows users to create, edit, and save their word documents for reporting purposes. While Microsoft Office offers an online option here, it seems limited to working within the Microsoft OneDriv ...

htmlms-wordms-officetext-editorrich-text-editor

The span created by jQuery does not automatically focus on the lightbox image

I am currently working on a jQuery script that generates a lightbox span when the drop-down menu is changed. My objective is to display an image when the drop-down menu changes and allow users to click on the image to open the lightbox on the screen. The ...

jqueryhtmllightbox

Experience the dynamic expansion of a droppable div as you elegantly drop an element within

When the questions "question1" and "question2" are dragged into "questionslots," I want the "questionSlots" div to expand its size dynamically when the second question is dropped into it. This means that both questions should be accommodated and visible wi ...

jqueryhtmlcssjquery-uidraggable

Use jQuery to retrieve HTML content excluding comments

Take a look at the code snippet below. HTML: <div> <p>sdfsdfsfsf</p> <!--<p>testing</p>--> </div> JQUERY $(document).ready(function(){ alert($("div").html()); }); OUTPUT <p>sdfsdfsfsf</p> & ...

jqueryhtmlcss

Remove any unnecessary white space and new lines from the HTML code

Is there a way to remove double whitespaces and new lines from my HTML output without altering the ones within textarea and pre tags using PHP? ...

phphtml

Utilize JavaScript to apply the CSS -moz-transition

Creating a web application and using CSS3 to transform a div, but encountering a challenge with Firefox. Able to make Chrome, Opera, and IE work properly, except for Firefox. Here's how I'm setting up the working browsers: obj.style.WebkitTrans ...

javascriptcssfirefoxstyles

Accessing .js and .css libraries from shared views in ASP.NET Core can be restricted

I am currently developing a simple application on ASP.NET core 3.1, and I'm facing a basic problem that I can't seem to solve. The menu of the application is located in a Shared view called _Layout.cshtml. I load .js and .css libraries in this v ...

cssasp.netviewsrcshared

Gulp does not generate any files

Hey there, I'm brand new to using node.js and coding in general. I recently attempted to convert SCSS to CSS using gulp. My gulpfile.js seems to be correct, but when I try running "gulp styles" in the node.js command prompt, I receive the following ou ...

javascriptcssnode.jssassgulp

Is there a way to send decimal values from a view to a controller using Vue.js?

I am encountering an issue when trying to pass decimal values from the view to the controller using Vue.js. Only decimal values seem to be arriving as NULL, while integer or string values work fine. Below is the code snippet: salvarProdutos: function ( ...

htmlasp.net-mvcvue.js

steps for marking comments as read or unread by multiple users

I'm working on a development blog for my project and I'd like to add a feature where users can mark comments as unread until they view them. For example, if an admin posts a comment, all users in that project should see it as unread. Can anyone ...

phpcssphpmyadmin

I need to show a DIV element when a specific anchor is in an active state within an HTML document

Is there a way to make the code below only visible when the url ends with #404? <!--404 code--> <style> .div1 { width: 300px; height: 100px; border: 1px solid blue; border-color: #ff0263; box-sizing: border-box; } < ...

javascripthtmlcss