Center align the table

<div class="text-center" style="align-items: center; justify-content: center;">
    <table style="border: 1rem;width: 100%;margin-left:auto;margin-right:auto;">
        <tr><th>Id</th><th>Quantity</th></tr>
        <tr><td>1</td><td>2</td></tr>
        <tr><td>3</td><td>4</td></tr>
        <tr><td>4</td><td>2</td></tr>
        
    </table>
</div>

I am having trouble aligning my table to the center on the page. I have tried using class=text-center, and 

align-items: center; justify-content: center;
but nothing seems to work.

htmlcsstwitter-bootstrapbootstrap-4

Answer №1

To center the content, you can use the CSS rule "margin-left: auto;margin-right: auto;". Keep in mind that this will center it within the containing div, so you may need to adjust the size of the div if you want it centered on the screen.

Here's an example:

<div class="text-center" style="width:100%">
  <table style="border: 1rem;margin-left: auto;margin-right: auto;">
    <tr>
      <th>Id</th>
      <th>Quantity</th>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
    </tr>
    <tr>
      <td>3</td>
      <td>4</td>
    </tr>
    <tr>
      <td>4</td>
      <td>2</td>
    </tr>
  </table>
</div>

Answer №2

Your styling looks good, but it's essential to include display: flex; in the container style.

align-items: center; justify-content: center;
only functions with display: flex;

The default value of display for a div is block, which is why your solution didn't work.

Please take a look at a functional fiddle: 

<div style="display: flex; align-items: center; justify-content: center;">
  <table style="border: 1rem;">
    <tr>
      <th>Id</th>
      <th>Quantity</th>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
    </tr>
    <tr>
      <td>3</td>
      <td>4</td>
    </tr>
    <tr>
      <td>4</td>
      <td>2</td>
    </tr>
  </table>
</div>

Answer №3

Employ flexbox for a flexible layout. Just add display: flex to your container.

<div style="display: flex; justify-content: center; align-items: center;">

 ... your content here
</div>

Answer №4

Give this a shot.

<div>
 <table style="border: 1px solid orange; margin-left: auto; margin-right: auto;">
  <tr><th>ID</th><th>Quantity</th></tr>
  <tr><td>A</td><td>5</td></tr>
  <tr><td>B</td><td>7</td></tr>
  <tr><td>C</td><td>3</td></tr>
 </table>
</div>

Answer №5

<div align="center">
    <p>Here is a table showing the Id and Quantity:</p>
    <table>
        <tr><th>Id</th><th>Quantity</th></tr>
        <tr><td>1</td><td>2</td></tr>
        <tr><td>3</td><td>4</td></tr>
        <tr><td>4</td><td>2</td></tr>
    </table>
</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

Creating an input field within a basic jQuery dialog box is not possible

Can anyone assist me in adding an input box to my dialog box? I am working with jquery-ui.js. Here is the code I currently have: $(document).on("click",".savebtn",function(). { var id = $(this).attr("id"); $.dialog({ ...

javascriptjqueryhtmlcssajax

My div won't stay fixed in the layout no matter what I try

Being fairly new to css, divs, and everything in between, I decided to create a simple layout for my band without unnecessary links like bio or merch store. Instead, I wanted separate spaces for our video, music player, and a Facebook window. I successful ...

csslayouthtml

What could be causing the default dropdown option to vanish once another selection is made?

Check out this GIF to illustrate my query. Is there a way to ensure that when an option is selected, the default choice "Watching" appears in the dropdown menu? For the direct link to the codepen, click here. <!DOCTYPE html> <html lang="en& ...

javascripthtmljquerybootstrap-4

Using div tags as interactive buttons, as well as incorporating dynamic functionality such as delete and report spam options

In this practice test scenario, the objective is to log in to Gmail, click on all checkboxes in a dynamic web table, and delete the mails. Below is the code that I have created for this task. The issue arises when checking if the delete button is visible. ...

htmlseleniumtestingautomationwebdriver

When I click on "Submit", it redirects me to the PHP page

I've followed a tutorial on creating custom PHP contact forms at this link: and made some modifications to the form for my specific requirements. However, when I click the Submit button on the form, it redirects me to the PHP page. What I actually w ...

phphtmlformsemailsubmit

Creating a unique data attribute in Alpine.js - A step-by-step guide

I am looking to establish a custom attribute and modify the value when clicked. This is my current setup: <div x-data="{ colorred = true }"> <div @click="colorred = !colorred">set red state</div> </div> I ...

javascripthtmlalpine.js

What is the best way to retrieve the current CSS width of a Vue component within a flexbox layout grid after it has been modified?

There's something about this Vue lifecycle that has me scratching my head. Let me simplify it as best I can. I've got a custom button component whose size is controlled by a flex grid container setup like this: <template> < ...

javascriptcssvuejs2flexboxvuetify.js

Accessibility issues detected in Bootstrap toggle buttons

I've been experimenting with implementing the Bootstrap toggle button, but I'm having an issue where I can't 'tab' to them using the keyboard due to something in their js script. Interestingly, when I remove the js script, I'm ...

javascriptjqueryhtmltwitter-bootstraptoggle

Tips for implementing a Material-UI TextField component without the background-color spilling over the border

Ensuring a Material-UI TextField is styled with a background-color on hover or focus has been a challenging task for me. The code snippet for my component is shown below: import React from "react"; import TextField, { TextFieldProps } from " ...

cssmaterial-uibordertextfieldbackground-color

Using an HTML file as the source for an image in the <img src=""> tag is a simple process that can greatly enhance the visual appeal of your webpage

My goal is to utilize an html file as the source for an image file within the <img src=""> tag in order to prevent mixed-content warnings when using an http image over https. For instance: index.html: <img src="./image.html" > image.htm ...

javascriptjqueryhtmlhttpsmixed-content

What is the function of object-fit when used with the canvas element?

Despite my thorough search, I have not come across any documentation to clarify this issue. Is it possible to use object-fit cover on canvas elements? My experiments have yielded unexpected results so far. Could someone provide me with a conclusive answe ...

csshtmlhtml5-canvasobject-fit

Is there a way to access the origin of an iframe?

I am facing a challenge with an HTML page that includes an iframe. Within the iframe, there are text and buttons that trigger onclick scripts. However, I'm having difficulty retrieving the values of getBoundingClientRect when I specify the ID of the b ...

javascripthtmliframe

Customizing CSS in Blazor on mouseover with multiple displayed divs

@foreach (var item in RootOfJson.results) { <div class="card" @onmouseout="@OnMouseOut" @onmouseover="@OnMouseOver"> <img class="@Imgdisplay" <a href="/cdn-cgi/l/email-protection" class="__cf_email__" da ...

cssparametersblazorelementonmouseover

Stop the web browser from storing the value of the input control in its cache

Many web browsers have a feature that saves the information you enter into certain fields so you don't have to type it again. While this can be convenient for most cases, I am faced with a situation where users must input a unique reference for a new ...

javascripthtmluser-interface

What is the best way to determine which id has been clicked using jQuery?

Can someone help me figure out how to determine which button has been clicked using jQuery? Here is the HTML code I am working with: <div class="row"> <div class="col-md-6"> <div class="well " id="option_a"> </div& ...

javascriptjqueryhtmltwitter-bootstrap

Learning the Basics of CSS: Understanding the Difference Between Float and Liquid Layout

What sets apart a float layout from a liquid layout? ...

cssterminology

Chrome browsers may sometimes experience issues with printing on the first attempt

I am facing an issue with printing HTML contents and images on a button click. The first time I try to print the page, the print preview is empty, but it works fine on the second attempt. Can someone please assist me in resolving this problem? The image s ...

javascriptjqueryhtmlprinting

What could be the reason for scrapy not returning any URLs?

Recently, I attempted to develop a tool to simplify my apartment search and access relevant information quickly (the website is not very user-friendly). However, I have encountered an issue and I may be overlooking something obvious...or perhaps I'm j ...

pythonhtmlcssscrapyweb-crawler

What steps can be taken to design a unique CSS pop-up that triggers upon page load, limited to one appearance per visitor every week

I have the following code snippet that allows me to display a pop-up either by clicking on the link or hovering over it. I am looking to modify it so that the pop-up opens when the page loads and restrict it to open only once per visitor per week. As some ...

javascripthtmlcssjquery

Explore the Filter List without being affected by the arrangement of words or the level of search precision

I was able to resolve the issue by adjusting my search filter algorithm. Now, I can search regardless of word order, but the results are not as specific as I need them to be. When I type "Correy" in the search bar, it shows all results containing that wo ...

javascriptjqueryhtmlcssfrontend