Having trouble centering contents of td ?

Joined
May 21, 2012
Messages
44
Reaction score
0
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...
 
Joined
Nov 13, 2020
Messages
302
Reaction score
36
Try:
Code:
.left-cell {
    width: 25%;
    display: flex;
    justify-content: center;
}
 
Joined
May 21, 2012
Messages
44
Reaction score
0
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>
 
Joined
Jul 4, 2023
Messages
339
Reaction score
39
Try

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

Bez tytułu.png
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

Forum statistics

Threads
473,707
Messages
2,569,343
Members
44,635
Latest member
Matt231

Latest Threads

Top