centered table within a container with vertical alignment

I'm having trouble centering a table vertically in a div. I've tried using vertical-align but it's not working for me. Can anyone suggest a solution to place it at the top of the div?

<div class="col-12 d-flex">
    <div class="col-6 text-center default_color" style="padding-top: 5rem;">
      <div class="row ">
        <div class="col-12 " *ngIf="!incompleteDataForTables">
          <b style="color:var(--select-bg-color)">Variación entre semanas sites </b>
      <div class="col-12"  style="vertical-align: middle">
          <div class="table-responsive m-2 p-1 " style="overflow-y: scroll; height: 100%;vertical- 
           align: middle">
              <table id="data_week_comp_3500" style="vertical-align: middle">
             </table>
          </div>
       </div>
    </div>
 </div>
</div>
htmlcssbootstrap-5

Answer №1

it appears that you are currently utilizing bootstrap, give this a try

<div class="col-12 d-flex">
  <div class="col-6 text-center default_color" style="padding-top: 5rem;">
    <div class="row">
      <div class="col-12" *ngIf="!incompleteDataForTables">
        <b style="color: var(--select-bg-color);"
          >Variación entre semanas sites</b
        >
        <div
          class="col-12 d-flex align-items-center justify-content-center mx-auto"
          style="height: 100vh; background-color: yellow;"
        >
          <div class="table-responsive m-2 p-1">
            <table id="data_week_comp_3500" class="table table-bordered">
              <thead>
                <tr>
                  <th>Header 1</th>
                  <th>Header 2</th>
                  <th>Header 3</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td>Data 1</td>
                  <td>Data 2</td>
                  <td>Data 3</td>
                </tr>
                <tr>
                  <td>Data 4</td>
                  <td>Data 5</td>
                  <td>Data 6</td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Applied classes d-flex, align-items-center and mx-auto

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

Guide to modifying the text color of a Primefaces/jqPlot line chart:

I've implemented a basic JSF line chart with PrimeFaces (using jqPlot library) in my project: <p:lineChart id="linear" value="#{team.chart}" title="Lap Times" xaxisLabel="Lap" yaxisLabel="Time ...

cssjsfprimefacesjqplot

Bootstrap: when divs cover the jumbotron

I have recently started exploring bootstrap and have been using it to build a homepage for my website. However, I am facing an issue: The three images are overlapping the jumbotron section and I can't seem to figure out why. Below is the HTML code sn ...

javascriptjqueryhtmlcsstwitter-bootstrap

Angular material is experiencing an issue where content is being cut off or

I am currently working on a project using AngularJS for a web application. I have encountered an issue where some of the content in the md-content element is being clipped. For instance, the body tag has the style: overflow: hidden, and the child md-conte ...

javascripthtmlcssangularjsangular-material

The Textfield component in Material UI now automatically sets the default date to the current date when using the "date" type

I am using Material UI's textfield with the type set to "date" and I'm experiencing an issue where the date defaults to the current date instead of mm/dd/yyyy. Is there a way to prevent this behavior and display mm/dd/yyyy when the user loads the ...

javascripthtmlreactjsreact-nativematerial-ui

The content's div is not extending completely in the horizontal direction

Just starting out with tailwind CSS and struggling a bit with the design aspect due to my lack of CSS skills. Need some assistance troubleshooting my layout, particularly in making sure the div container stretches to fit the screen size properly. https:// ...

cssreactjsnext.jstailwind-css

What is the method to make a String bold when sending it through a messaging service?

Here is the structure of my service: import { Injectable } from '@angular/core'; @Injectable({ providedIn: 'root', }) export class MessageService { messages: string[] = []; add(message: string) { this.messages.push(message); ...

htmlangulartypescriptservicecomponents

Text centered vertically with jQuery is only loaded after the page is resized

My jQuery script is designed to vertically center text next to an image, but it seems to only work properly after resizing the page. $(window).load(function () { $(function () { var adjustHeight = function () { $('.vertical-al ...

javascriptjqueryhtmlcssruby-on-rails

VueD3tree successfully fetches data, however, it is not being displayed on the screen

Just started delving into Vue and VueD3tree. Attempting to display a tree using the vued3tree library with data pulled from an API. Strangely enough, when trying with static data, the tree displays perfectly fine. However, when fetching data dynamically, a ...

javascripthtmljsonvue.jsvue-component

Eliminate whitespace on the right side of a webpage using Bootstrap

I am currently working on a form that will appear in a modal, but I need it to be centrally aligned so that I can reduce the size of the modal. Here is what I have implemented so far: It seems like there is some space being "reserved" for columns that are ...

htmlcsstwitter-bootstrapbootstrap-modal

Implementing a permanent class following an incident

Is it possible to dynamically add a class to an element when an event occurs rather than based on a condition? For example, I have a td that displays a variable. <td>{{myVar}}</td>//myVar=10 When the variable changes to myVar=15, I want to ad ...

javascripthtmlangularjs

Optimizing Bootstrap 4 Flex-Row Dimensions

Issue: I'm currently working on a relatively intricate ListGroup using bootstrap v4. The .flex-row div is displaying some mysterious white space at the bottom, and I need assistance in eliminating it. Attempts Made So Far: I've experimented w ...

htmlcsstwitter-bootstrapflexboxbootstrap-4

Screen white on the right side

I am encountering an issue where my screen shows white on the side when I scroll to the right. I am unsure how to remove it and cannot locate the problem in the code. Here is a link to the code: https://jsfiddle.net/y3j01hbt/ In the provided code, there i ...

javascriptjquerycsstwitter-bootstrap

Can you explain the distinction between ' &:hover' and ' & :hover' pseudoclass selectors?

While styling a Material-UI Button, I encountered an unexpected behavior when adding hover effects. When using & :hover, only the inner span of the button was affected. However, when using &:hover, the desired style was achieved. What is the diff ...

csssassmaterial-ui

Image not aligning to center - email

Struggling to center align an image at the top of an email due to code that hides it when the browser is larger than 520px. Is there a way to exempt this specific image and keep it centered? .mobile { display: none !important; font-size 0 !importa ...

htmlcssemail

JS script for clicking various icons on a webpage that trigger the opening of new tabs

I am working on a webpage where I have 9 icons with the same class. I am trying to write JavaScript code that will automatically open all 9 icons when the webpage loads. I tried using the code below, but it only clicks on the first icon and stops. let ...

javascripthtmljquerybrowser

Unable to render a child div completely opaque using the opacity attribute

I am currently working on a popup feature that, when displayed, will blur the background of the page to a grey color. The .cover element is responsible for this overlay effect. Unfortunately, I am facing issues overriding its default opacity:0.6; property ...

htmlcss

The template in AngularJS route fails to display

I am currently facing an issue with loading multiple pages using AngularJS $routeProvider and two controllers. Whenever I click on a link from the first partial to go to the second one, the second partial fails to render properly, displaying only template ...

javascripthtmlangularjsangularjs-routing

spark of unique substance

Having trouble with cycle2 as all images are briefly displayed when the page loads. I tried the recommended solution http://jquery.malsup.com/cycle/faq.html but it didn't stop the flashing, indicating a different issue: The suggested fix for Cycle is ...

javascriptjqueryhtmlcssjquery-cycle2

The left side of the form input material is obscured unless the necessary criteria are fulfilled

I am currently in the process of developing the front-end for a web application using the material library. The issue I am facing is that when a field does not meet its requirements, such as needing to enter a 'bedrijfsnaam', the border turns red ...

cssangularmaterial-uiangular-material

Turn an entire div into a clickable element with a functional :active CSS rule that is compatible with IE10

I am currently working on designing a clickable panel for an html app that will include multiple text elements and images. Based on my understanding, this is typically achieved using a div. An example of this would be: <div class="myButton"> &l ...

htmlcssinternet-explorer-10