Achieving Perfect Alignment in HTML Tables

Question

Achieving Perfect Alignment in HTML Tables

I have created a simple HTML table and I am trying to center it vertically in the middle of the page based on the user's device height. So far, I have tried adding a div with 100% height and width, positioning the table at 50% from the top and left, but it hasn't worked. Any suggestions?

body {
    background-color: #a00000;
}
table {
    margin: 50px auto 25px auto;
    padding: 0px;
    background-color: #fff;
    border-radius: 10px;
}
td {
    background-color: #fff;
    padding: 10px;
    background-color: #fff;
    border-radius: 10px;
}
img {
    max-width: 120px;
    max-height: 120px;
    border: solid 5px #a00000;
    border-radius: 5px;
    background-color: #a00000;
}

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Bobcat Menu</title>
        <meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' name='viewport' />
        <link rel="stylesheet" href="css/style.css">
    </head>
    <body>
        <table align="center">
            <tr>
                <td>
                    <a href="mobincube://action/section/DropDay">
                        <img src="
https://s3-us-west-2.amazonaws.com/s.cdpn.io/837604/D.png" />
                    </a>
                </td>
                <td>
                    <a href="mobincube://action/section/Schedule">
                        <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/837604/S.png" />
                    </a>
                </td>      
            </tr>
            <tr>
                <td>
                    <a href="mobincube://action/section/Calculators">
                        <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/837604/C.png" />
                    </a>
                </td>
                <td>
                    <a href="mobincube://action/section/News">
                        <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/837604/N.png" />
                    </a>
                </td>      
            </tr>    
        </table>
    </body>
</html>

html css

Answer 1

Answer №1

If you want to achieve the desired outcome, consider utilizing flexbox.

Firstly, ensure that both the body and html elements have a height of 100%.
Enclose the table within a wrapper div and apply the following CSS:
```
.wrapper {
   display: flex;
   height: 100%;
}
```
Adjust the margins of the table using margin: auto;

By following these steps, you can guarantee that your table will be perfectly centered.

body, html { 
    height: 100%;
}
body {
    background-color: #a00000;
    margin: 0; /* eliminate default browser-added margins */
}
.wrapper {
   display: flex;
   height: 100%;
}
table {
    margin: auto;
    padding: 0px;
    background-color: #fff;
    border-radius: 10px;
}
td {
    background-color: #fff;
    padding: 10px;
    background-color: #fff;
    border-radius: 10px;
}
img {
    max-width: 120px;
    max-height: 120px;
    border: solid 5px #a00000;
    border-radius: 5px;
    background-color: #a00000;
}

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Bobcat Menu</title>
        <meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' name='viewport' />
        <link rel="stylesheet" href="css/style.css">
    </head>
    <body>
        <div class="wrapper">
        <table align="center">
            <tr>
                <td>
                    <a href="mobincube://action/section/DropDay">
                        <img src="
https://s3-us-west-2.amazonaws.com/s.cdpn.io/837604/D.png" />
                    </a>
                </td>
                <td>
                    <a href="mobincube://action/section/Schedule">
                        <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/837604/S.png" />
                    </a>
                </td>      
            </tr>
            <tr>
                <td>
                    <a href="mobincube://action/section/Calculators">
                        <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/837604/C.png" />
                    </a>
                </td>
                <td>
                    <a href="mobincube://action/section/News">
                        <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/837604/N.png" />
                    </a>
                </td>      
            </tr>    
        </table>
        </div>
    </body>
</html>

Answer 2

If you want to achieve the desired outcome, consider utilizing flexbox.

Firstly, ensure that both the body and html elements have a height of 100%.
Enclose the table within a wrapper div and apply the following CSS:
```
.wrapper {
   display: flex;
   height: 100%;
}
```
Adjust the margins of the table using margin: auto;

By following these steps, you can guarantee that your table will be perfectly centered.

body, html { 
    height: 100%;
}
body {
    background-color: #a00000;
    margin: 0; /* eliminate default browser-added margins */
}
.wrapper {
   display: flex;
   height: 100%;
}
table {
    margin: auto;
    padding: 0px;
    background-color: #fff;
    border-radius: 10px;
}
td {
    background-color: #fff;
    padding: 10px;
    background-color: #fff;
    border-radius: 10px;
}
img {
    max-width: 120px;
    max-height: 120px;
    border: solid 5px #a00000;
    border-radius: 5px;
    background-color: #a00000;
}

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Bobcat Menu</title>
        <meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' name='viewport' />
        <link rel="stylesheet" href="css/style.css">
    </head>
    <body>
        <div class="wrapper">
        <table align="center">
            <tr>
                <td>
                    <a href="mobincube://action/section/DropDay">
                        <img src="
https://s3-us-west-2.amazonaws.com/s.cdpn.io/837604/D.png" />
                    </a>
                </td>
                <td>
                    <a href="mobincube://action/section/Schedule">
                        <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/837604/S.png" />
                    </a>
                </td>      
            </tr>
            <tr>
                <td>
                    <a href="mobincube://action/section/Calculators">
                        <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/837604/C.png" />
                    </a>
                </td>
                <td>
                    <a href="mobincube://action/section/News">
                        <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/837604/N.png" />
                    </a>
                </td>      
            </tr>    
        </table>
        </div>
    </body>
</html>

Answer 3

Answer №2

To enhance the appearance of your table, consider incorporating these CSS styles into the table tag:

table{
    /* ... */
    position: fixed;
    top: 50%;
    transform: translateY(-50%);
}

Answer 4

To enhance the appearance of your table, consider incorporating these CSS styles into the table tag:

table{
    /* ... */
    position: fixed;
    top: 50%;
    transform: translateY(-50%);
}

Answer 5

Answer №3

Apply this style to the parent div: display: table-cell;

Then, use vrtical-align on the actual table.

To implement this in your code:
html:
<div id="wrapper">
  <div id="content">Your content here</div>
</div>

css:
#wrapper {display: table}

#content {
  display: table-cell;
  vertical-align: middle;
 }

Answer 6

Apply this style to the parent div: display: table-cell;

Then, use vrtical-align on the actual table.

To implement this in your code:
html:
<div id="wrapper">
  <div id="content">Your content here</div>
</div>

css:
#wrapper {display: table}

#content {
  display: table-cell;
  vertical-align: middle;
 }

Answer 7

Answer №4

If you're looking to vertically center yourself on any browser, you could try using the following CSS code:

div {
    margin: 50px auto 25px auto; 
    padding: 0px;
    background-color: #fff;
    border-radius: 10px;
    position: relative;
    top: 50%;
    transform: translateY(50%);
}

https://example.com/css-centering

Answer 8

If you're looking to vertically center yourself on any browser, you could try using the following CSS code:

div {
    margin: 50px auto 25px auto; 
    padding: 0px;
    background-color: #fff;
    border-radius: 10px;
    position: relative;
    top: 50%;
    transform: translateY(50%);
}

https://example.com/css-centering

Achieving Perfect Alignment in HTML Tables

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Is there a way to update CSS dynamically in server-side ASP.NET?

Trouble with reading from a newly generated file in a node.js program

Display the initial three image components on the HTML webpage, then simply click on the "load more" button to reveal the subsequent two elements

Tips for displaying a setCustomValidity message or tooltip without needing to submit the event

An unexpected page transition occurs when attempting to delete a link

Can the autoscroll offset be adjusted while dragging?

Keep the sub-menu in a kendo context menu from closing until the user either hovers over another menu item or clicks outside of the current item

Creating an HTML file with a Windows-inspired icon and file name design using CSS

Achieving an italicized appearance throughout an HTML document

Encountering the error "undefined object" while using the yield keyword in JavaScript

How can I retrieve the index of an element within a 2D array using JavaScript when the array is displayed on a webpage?

Tips for automatically adjusting a vertical side bar to fit between the browser's header and bottom

Easily toggle between various image source paths

Tips on displaying inline span text within an anchor element, above the anchor text

Overflow due to cascading style sheets

Alternative form for non-javascript browsers in the absence of script

Creating a unique look for SELECT (Option) tags using gradients and a personalized arrow design

The visible overflow-x property is failing to display the excess content within the unordered list

Unusual Behavior of CSS and JQuery Selectors

In PHP, special characters in HTML remain unchanged when entered into a text input field