Having trouble centering contents of td ?

vmars316 · May 2, 2023

Thanks ,
Having trouble centering contents of td .
Here is the code:

Code:

<!DOCTYPE html>
<html>
<head>
    <title>Table Example</title>
    <style>
        table {
            border-collapse: collapse;
            width: 100%;
        }
        td {
            border: 1px solid black;
            padding: 10px;
        }
        .left-cell {
            width: 25%;
            text-align: center; /* center the contents */
        }
        .right-cell {
            width: 75%;
        }
        
        .outer-box {
  border: 2px solid black; width:60px; height:30px; text-align:center;
  background-color:#EFEFEF; padding: 10px;
}

.inner-box {
  border: 2px solid black; width:36px; height:8px;
  background-color:#FFFFFF; padding: 10px;
}

    </style>
</head>
<body>
    <table>
        <tr>
            <td class="left-cell">
                <div class="outer-box">
                <div class="inner-box">
                 </div>
                </div>
            </td>
            <td class="right-cell">
                Click This Button To [Change the Background-Color]
            </td>
        </tr>
    </table>
</body>
</html>

Thanks for your Help...

BigDady · May 3, 2023

Try:

Code:

.left-cell {
    width: 25%;
    display: flex;
    justify-content: center;
}

vmars316 · May 3, 2023

Thanks , sorry to say but that gives the same result :

JavaScript:

<!DOCTYPE html>
<html>
<head>
    <title>Table Example</title>
    <style>
        table {
            border-collapse: collapse;
            width: 100%;
        }
        td {
            border: 1px solid black;
            padding: 10px;
        }
/*        .left-cell {
            width: 25%; display: flex; justify-content: center;
            text-align: center; /* center the contents */
*/

.left-cell {
    width: 25%;
    display: flex;
    justify-content: center;
} // https://www.thecodingforums.com/threads/having-trouble-centering-contents-of-td.974875/

        }
        .right-cell {
            width: 75%;
        }
        
        .outer-box {
  border: 2px solid black; width:60px; height:30px; text-align:center;
  background-color:#EFEFEF; padding: 10px;
}

.inner-box {
  border: 2px solid black; width:36px; height:8px;
  background-color:#FFFFFF; padding: 10px;
}

    </style>
</head>
<body>
    <table>
        <tr>
            <td class="left-cell">
                <div class="outer-box">
                <div class="inner-box">
                 </div>
                </div>
            </td>
            <td class="right-cell">
                Click This Button To [Change the Background-Color]
            </td>
        </tr>
    </table>
</body>
</html>

VBService · Jul 19, 2023

Try

CSS:

      .left-cell {
        width: 25%;
      }
      .left-cell div {
        margin-inline: auto;
      }

Centering a button using flexbox	2	Feb 5, 2023
Im having trouble containing a title an image and a button	2	Oct 26, 2022
Trouble with css	4	Mar 20, 2020
Having difficulty with the layout of these images / video for this web page	2	Jul 5, 2022
Help with my responsive home page	2	Dec 14, 2022
Help with Visual Lightbox: Scripts	2	May 3, 2023
I need help fixing my website	2	Oct 15, 2023
Need help , Having problem with Drag n Drop ?	9	Dec 21, 2022

Having trouble centering contents of td ?

vmars316

BigDady

vmars316

VBService

Ask a Question

Similar Threads

Members online

Forum statistics

Latest Threads