Welcome!

By registering with us, you'll be able to discuss, share and private message with other members of our community.

SignUp Now!
  • Guest, before posting your code please take these rules into consideration:
    • It is required to use our BBCode feature to display your code. While within the editor click < / > or >_ and place your code within the BB Code prompt. This helps others with finding a solution by making it easier to read and easier to copy.
    • You can also use markdown to share your code. When using markdown your code will be automatically converted to BBCode. For help with markdown check out the markdown guide.
    • Don't share a wall of code. All we want is the problem area, the code related to your issue.


    To learn more about how to use our BBCode feature, please click here.

    Thank you, Code Forum.

Problem with centering div within div ?

vmars316

Well-Known Coder
Thanks ,
I am having Problem with centering div within div .

CSS:
<!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>

Pls , what am I doing wrong ?
Thanks for your Help...
 
I see. text-align: center; will not do that for you - as the name suggests, this is for text only. I think you need to use something like justify-content: center;. However I could not get that to work, which irritates me no end. Perhaps one of the more CSS-savvy people here will chip in ?
 
Yes , that would be good to know :)
I think I found out. Apparently you need display:flex; in order for justify-content:center; to work.
However, setting this on the table element containing the two nested boxes does not work well (try it out to see the result):

CSS:
td
{
     border: 1px solid black;
     padding: 10px;
     display: flex;
     justify-content: center;
 }

I could only get it to work by inserting an extra container like this:

CSS:
.foobar
{
    display: flex;
    justify-content: center;
}

HTML:
<div class="foobar">
     <div class="outer-box">
         <div class="inner-box">
         </div>
     </div>
<div>

It's not very pretty, bit of a div soup actually, but it works. There may well be a smarter solution but we need a CSS expert for that 😀
 
put margin: auto; in the outer-box css
Ah Perfect , Thanks you very much !
I think I found out. Apparently you need display:flex; in order for justify-content:center; to work.
However, setting this on the table element containing the two nested boxes does not work well (try it out to see the result):

CSS:
td
{
     border: 1px solid black;
     padding: 10px;
     display: flex;
     justify-content: center;
 }

I could only get it to work by inserting an extra container like this:

CSS:
.foobar
{
    display: flex;
    justify-content: center;
}

HTML:
<div class="foobar">
     <div class="outer-box">
         <div class="inner-box">
         </div>
     </div>
<div>

It's not very pretty, bit of a div soup actually, but it works. There may well be a smarter solution but we need a CSS expert for that 😀
 

New Threads

Latest posts

Buy us a coffee!

Back
Top Bottom