What's the best way to perfectly align table text in the center both horizontally and vertically?

Despite encountering similar or potentially identical questions, I have attempted the suggested solutions without success.

My aim is to design a table that centers text both vertically and horizontally, ideally using flex. However, the structure of the table gets disrupted when employing "d-flex align-items-center justify-content-center". Furthermore, it is crucial for the first blocks on the left to have extended width!

I am striving to replicate or achieve something akin to the table displayed on this webpage ""

Below is my code:

<div class="row my-4 bg-white">
    <div class="table-responsive">
        <table class="table table-bordered">
            <thead>
                <tr>
                    <th><h6 class="font-weight-light">Ad unit</h6></th>
                    <th><h6 class="font-weight-light text-capitalize">buy</h6></th>
                    <th><h6 class="font-weight-light text-capitalize">rent</h6></th>
                    <th><h6 class="font-weight-light text-capitalize">sold</h6></th>
                    <th><h6 class="font-weight-light text-capitalize">news</h6></th>
                    <th><h6 class="font-weight-light text-capitalize">guides</h6></th>
                    <th><h6 class="font-weight-light text-capitalize">lifestyle</h6></th>
                    <th><h6 class="font-weight-light text-capitalize">video hub</h6></th>
                    <th><h6 class="font-weight-light text-capitalize">find agents</h6></th>
                    <th><h6 class="font-weight-light text-capitalize">new homes</h6></th>
                </tr> justifa
            </thead>
            <tbody>
                <tr>
                    <td><h6 class="font-weight-light">Home Page Hero</h6></td>
                    <td class="bg-green"></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                </tr>
            </tbody>
        </table>
    </div>
</div>

ul a{
    color: #8ec302 !important;
    text-underline: none !important;
    text-decoration: none !important;
}
a{
    color: inherit !important;
    text-underline: none !important;
    text-decoration: none !important;
}
#navigation a:hover{
    color: #8ec302 !important;
    text-underline: none !important;
    text-decoration: none !important;
}
#navigation a{
     color: inherit !important;
     text-underline: none !important;
     text-decoration: none !important;
 }

.footer-hyperlink-hover  a:hover{
    color: #8ec302 !important;
    text-underline: none !important;
    text-decoration: none !important;
}
.image-no-resize {
    min-height: 200px;
    min-width: 350px;
}
.card-header {
    border: 1px solid rgba(0,0,0,.125);
    border-radius: .25rem;
}

.card {
    border: none !important;
}
h6{
    padding-bottom: 2px !important;
    margin-bottom: 2px !important;
}
ul h6{
    padding-bottom: 2px !important;
    margin-bottom: 2px !important;
}
span{
    font-weight: bold;
}
/*End of styling*/

/*Pictures*/
.career-picture{
    background: linear-gradient(rgba(0, 0, 0, 0.5),rgba(0, 0, 0, 0.5)), url("../images/career.jpg") center/cover no-repeat;
}
/*End of pictures*/

/*Spacing*/
.container-fluid-short{
    max-width: 100rem;
    width: 100%;
}
.container-fluid-shorter{
    max-width: 65rem;
}
.container-fluid-shorter-inner{
    max-width: 76rem;
}

Although I managed to set a custom width on the left initially, it ceased functioning after recent modifications to the code. Could you provide any guidance on what might be incorrect? Thank you for any assistance!

htmlcssbootstrap-4

Answer №1

To center text vertically and horizontally, use text-center align-middle. In addition, make sure to designate the first column of each row with 

<th scope="row"></th>

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row my-4 bg-white">
    <div class="table-responsive">
        <table class="table table-bordered">
            <thead>
                <tr>
                    <th scope="col"><h6 class="font-weight-light">Header</h6></th>
                    <th scope="col"><h6 class="font-weight-light">Header</h6></th>
                    <th scope="col"><h6 class="font-weight-light text-capitalize">Header</h6></th>
                    <th scope="col"><h6 class="font-weight-light text-capitalize">Header</h6></th>
    
                </tr>
            </thead>
            <tbody>
                <tr>
                    <th scope="row"><h6 class="font-weight-light">Home Page Hero</h6></th>
                    <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</td>
                    <td>Default</td>
                    <td class="text-center align-middle">Center Everything</td>
                </tr>
            </tbody>
        </table>
    </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

Is it possible to combine ng-switch and ng-if directives in Angular?

I attempted to combine the angular ng-switch and ng-if directives, but it doesn't seem to be functioning properly. Here is what I tried: <div data-ng-if = "x === 'someValue'" data-ng-switch on = "booleanValue"> <div data-ng-swit ...

javascripthtmleclipseangularjsangularjs-directive

Multiplication and Division with Unit-ed Values in CSS calc() Function

Can you perform multiplication or division with unit-based values using calc() (such as 100%, 5px, etc)? For instance, I wanted to try something like this: width: calc(100% * (.7 - 120px / 100%)); Expecting it to result in something similar to (if 100% ...

csscss-calc

Locate the parent element that has the smallest amount of space taken up by its child elements

My goal is to determine which container, among several <divs>, each containing multiple child <divs> of varying sizes, has the smallest amount of space covered by the child elements. <div class="container" id="first"> ...

javascripthtmlcss

How to stop font-family and letter spacing from affecting the margin of div and ul elements in CSS

I'm facing a challenge with aligning a rotated div and an unordered list in a container. Adjusting the margin of either element does the trick, but changing font-family or letter-spacing globally affects the spacing between the two. Check out this JS ...

htmlcss

In NextJS with SASS modules, the selector ":root" is considered impure since pure selectors are required to include at least one local class or id within them

Lately, I made the switch to using modules in my next.js project. However, I keep encountering an error in my newly created .module.scss files that says: "Selector ":root" is not pure (pure selectors must contain at least one local class or id)". It seems ...

csssassnext.jscss-modulesreact-css-modules

What is the best way to justify list items to the left?

Having trouble aligning my list content to the left. Any suggestions are welcome! Here is a snippet of the code: <div class="col-md-4 mb-1"> <i class="fas fa-hiking fa-4x"></i> <h4 class="my-4" font-weight-bold&g ...

htmlcsshtml-lists

Adjust the position of the IMG to the left side

Struggling with some code and need some assistance: <script> function run() { document.getElementById("srt").value = document.getElementById("Ultra").value; } </script> <script> function ru ...

javascripthtmlselectalignment

Creating a javascript function to update content on click

Recently, I've been designing a webpage and encountered an issue. I want the text in a specific area to change whenever a user clicks on a link. Below is the code snippet related to the section I want to modify using a JavaScript function. <div id ...

javascriptjqueryhtmlcss

Exploring the Vertical Metrics of Various Typeface Styles

I'm encountering a problem and struggling to find a solution. I'm in the process of creating a website and incorporating various fonts. My goal is to ensure that every font appears visually similar to the others and align perfectly at the base. ...

htmlcssfontswebfonts

Styling: How can I create indentation for a specific text area while leaving another unaffected?

I am attempting to format this complete form with an indentation: <%= form_for([micropost, micropost.comments.build], :html => { :id => "blah_form" }) do |f| %> <div class="field"> <p2>Who are you?</p2> ...

cssruby-on-rails-3

Mapping the preselected values of multiple input fields into an array in Angular 6: A step-by-step guide

When submitting a form with input fields, I need to capture the selected values into an array format like {"userid":1,"newstatus":[1],"mygroup":[1,2,3]}. I attempted using ngmodel but encountered issues. Below is the code snippet: home.component.html & ...

htmlangulartypescript

Having trouble with the functionality of a simple jQuery toggle menu on mobile?

I am experiencing an issue with a simple toggle menu that utilizes jQuery's on: tap feature, but it is not functioning as expected: <nav id="mobile-nav"> <ul> <li>Item 1</li> <li>Item 2</li> ...

javascriptjqueryhtmlioscss

Display the HTML code in its formatted text output

I am currently facing an issue while trying to take input from the user using the WYSIWYG text editor plugin. When I attempt to display the text in a label or paragraph, all the HTML tags become visible. For instance, @string str = "<b>sample text&l ...

html

Is there a way to prevent on-click errors in ReactJS that someone can share with me?

The onclick listener was expected to be a function, but instead received a value of string type. getListener@http://localhost:3000/static/js/bundle.js:18256:15 accumulateSinglePhaseListeners@http://localhost:3000/static/js/bundle.js:22846:39 <button on ...

javascripthtmlreactjshyperlinkbuttonclick

Tips for maintaining the size of a div container

Take a look at the following code snippet: <head> <title></title> <style> .section_divs { background-color: lightblue; float: left; } #section_empty { background-color: tomato; width ...

htmlcss

How to place a div with 100% width at the bottom of a float with a fixed width

Each day the same question seems to pop up, yet this particular issue has me stumped... My goal is a simple one - I aim to design a fixed width layout with 3 columns, while ensuring that the header and footer stretch across 100% of the screen. Everything ...

csshtml

Resolving issues with CSS placement and resizing

I have been considering developing a UI toolkit that offers an intuitive and powerful way of setting the position and size of elements/widgets. Here are some examples of how it could be used (although they are not currently implemented): ui("Panel").size( ...

javascriptcssuser-interface

Iterate over the array and eliminate any stylesheets

Currently working on a website using WordPress, and dealing with some unwanted css files that come with certain plugins. I've been attempting to remove these stylesheets with JavaScript but keep running into an error saying Failed to execute 'qu ...

javascripthtmljquery

Purchase Masonry Supplies for Optimal Arrangement

I've been using a neat little tool called jquery-isotope to create a masonry style layout for the blog posts on my website. It's set up with two columns, showcasing two different post types - long form articles and image-only posts. The masonry ...

jquerycssjquery-masonryjquery-isotope

I am eager to run the code that I retrieved from the server. I have access to the code in my console and I desire for it to execute on the main browser page

Currently, I have a simple Google Chrome Extension that includes a button. By using AJAX, I am fetching a script from a server in my browser's console. Essentially, clicking on the extension reveals a button which, when clicked, fetches the script fro ...

javascripthtmlcssajaxgoogle-chrome-extension