CODEWITHSUNDEEP
javascripthtmlcss
stilts77
stilts77

Reputation: 191

How to centre a <div> within several other <div>s (using a mixture of w3.css and css)

I am using w3-css and bog-standard css.

I have a png of a word: INSPIRE, whose lettering is transparent. Behind the letters are coloured rectangles. In front of the coloured rectangles are white rectangles that give the impression of the INSPIRE letters being filled up, depending on how high the rectangles reach. The example (under the link) has the white rectangles set to 50% height. In the original, these heights are determined by numbers pulled from a database and not set the way they are in the script.

The filling of the INSPIRE happens thus:

There is a 'w3 div' called w3-third, within this sits another div called w3-card, within this is an ordinary div - styled in the header - called back and within this sits the divs for each letter block and finally the div for the INSPIRE png. I make use of z values so the png sits on top.

I cannot for the life of me get the INSPIRE image to sit centrally within the w3-card div.

If I could wave a magic wand then I would 'center' the #back div. I've tried setting a width...

 #back {
          position: absolute;
          width: 294px;
          margin: 0 auto;
          z-index: 0;
        }

But it makes no difference.

Please, please help before my head explodes...

Below is the full page code for the link:

  

      <html>
    
        <head>
          <title>
            INSPIRE
          </title>
          <meta name="viewport" content="width=device-width, initial-scale=1">
          <link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
          <link rel="stylesheet" href="http://www.w3schools.com/lib/w3-theme-black.css">
          <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css">
          <style>
            #back {
              position: absolute;
              width: 294px;
              margin: 0 auto;
              z-index: 0;
            }
            
            #behindI {
              position: absolute;
              left: 0px;
              z-index: 1;
            }
            
            #behindN {
              position: absolute;
              left: 33px;
              z-index: 1;
            }
            
            #behindS {
              position: absolute;
              left: 80px;
              z-index: 1;
            }
            
            #behindP {
              position: absolute;
              left: 113px;
              z-index: 1;
            }
            
            #behindII {
              position: absolute;
              left: 160px;
              z-index: 1;
            }
            
            #behindR {
              position: absolute;
              left: 200px;
              z-index: 1;
            }
            
            #behindE {
              position: absolute;
              left: 247px;
              z-index: 1;
            }
            
            #front {
              position: absolute;
              z-index: 3;
            }
            
            #myCanvasI {
              z-index: 2;
            }
          </style>
          <script>
            var i = 0.5;
            var n = 0.5;
            var s = 0.5;
            var p = 0.5;
            var ii = 0.5;
            var r = 0.5;
            var e = 0.5;
          </script>
        </head>
    
        <body>
          <div class="w3-third">
            <div class="w3-card-2 w3-padding-top w3-black w3-center" style="min-height:460px">
              <h3>Characteristics of Learning</h3><br>
              <p>How are you doing in each area? </p>
              <p>Are you the full INSPIRE? </p>
              <div id="back">
                <div id="front">
                  <img src="images/fullinspire33.png" />
                </div>
                <div id="behindI">
                  <canvas id="myCanvasI" width="33" height="33">
          <script>
          var z=document.getElementById("myCanvasI");
    var ctx=z.getContext("2d");
    ctx.fillStyle="red";
    ctx.fillRect(0,0,33,33);
    ctx.stroke();
    ctx.fillStyle="white";
    ctx.fillRect(0,0,33,33*i);
    ctx.stroke();
            </script>
          </canvas></div>
                <div id="behindN">
                  <canvas id="myCanvasN" width="47" height="33">
          <script>
          var y=document.getElementById("myCanvasN");
    var ctx=y.getContext("2d");
        ctx.fillStyle="orange";
    ctx.fillRect(0,0,47,33);
    ctx.stroke();    
            
            ctx.fillStyle="white";
    ctx.fillRect(0,0,47,33*n);
    ctx.stroke();
            </script>
            </canvas> </div>
                <div id="behindS">
                  <canvas id="myCanvasS" width="33" height="33">
          <script>
          var x=document.getElementById("myCanvasS");
    var ctx=x.getContext("2d");
            ctx.fillStyle="yellow";
    ctx.fillRect(0,0,33,33);
    ctx.stroke();
    ctx.fillStyle="white";
    ctx.fillRect(0,0,100,33*s);
    ctx.stroke();
            </script></canvas></div>
                <div id="behindP">
                  <canvas id="myCanvasP" width="47" height="33">
          <script>
          var w=document.getElementById("myCanvasP");
    var ctx=w.getContext("2d");
    ctx.fillStyle="green";
    ctx.fillRect(0,0,47,33);
    ctx.stroke();
            ctx.fillStyle="white";
    ctx.fillRect(0,0,47,33*p);
    ctx.stroke();
            </script>
            </canvas>
                </div>
                <div id="behindII">
                  <canvas id="myCanvasII" width="40" height="33">
          <script>
          var v=document.getElementById("myCanvasII");
    var ctx=v.getContext("2d");
            ctx.fillStyle="blue";
    ctx.fillRect(0,0,40,33);
    ctx.stroke();
    ctx.fillStyle="white";
    ctx.fillRect(0,0,40,33*ii);
    ctx.stroke();
            </script>
            </canvas>
                </div>
                <div id="behindR">
                  <canvas id="myCanvasR" width="47" height="33">
          <script>
          var u=document.getElementById("myCanvasR");
    var ctx=u.getContext("2d");
            ctx.fillStyle="indigo";
    ctx.fillRect(0,0,47,33);
    ctx.stroke();
    ctx.fillStyle="white";
    ctx.fillRect(0,0,47,33*r);
    ctx.stroke();
            </script>
            </canvas>
                </div>
                <div id="behindE">
                  <canvas id="myCanvasE" width="47" height="33">
          <script>
          var t=document.getElementById("myCanvasE");
    var ctx=t.getContext("2d");
            ctx.fillStyle="violet";
    ctx.fillRect(0,0,47,33);
    ctx.stroke();
    ctx.fillStyle="white";
    ctx.fillRect(0,0,47,33*e);
    ctx.stroke();
            </script>
            </canvas>
                </div>
              </div>
            </div>
          </div>
        </body>
    
        </html>

Upvotes: 0

Views: 68

Answers (5)

Runny Yolk
Runny Yolk

Reputation: 1164

As Johannes say, you could try wrapping #front in a relatively positioned div and setting margin: 0 auto.

Or you can set:

.w3-card-2 {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
}

You'll have to set the children element's 'order' property in CSS to get them back in the same order as before, but that's easy.

Upvotes: 1

mikepa88
mikepa88

Reputation: 803

Add this to the css:

.w3-card-2{ position: relative; }
#back{ left: 50%; margin-left: -146px; }

The -146px are half of the element with, so if set dynamically, take it into account

This puts the element 50% to the left of the container (that needs to be positioned, thus position relative in parent). And then moves it half its width to the left so its it's center that is positioned in the center and not its left side.

Upvotes: 1

webFashion
webFashion

Reputation: 748

Add a position:relative to the w3-card div. After that, all the child elements which are on position:absolute; will get positionned related to that element.

Appending left:0px; right:0px; to #back will do the thing then.

The changes will be:

 #back {
          position: absolute;
          width: 294px;
          margin: 0 auto;
          z-index: 0;
          left: 0px;
          right: 0px;
        }

and

#w3-card {
   position: relative;
}

Upvotes: 1

Badr
Badr

Reputation: 10648

Just add another div that wraps the div with id black like this

    <div style="
        display: inline-block;
        width: 295;
        height: 35px;
        margin: auto;
    ">
    <div id="back"> you stuff in this div </div>
    </div>

Just in case you want to keep your div with id black as position:absolute;

Upvotes: 1

Johannes
Johannes

Reputation: 105

You cant use position: absolute; for margin 0 auto you need to use position relative or static to do this

Upvotes: 1

Related Questions