个人中心
gpt4 book ai didi

javascript - 如何将一个
置于其他几个
的中心(混合使用 w3.css 和 css)

转载 作者：太空宇宙 更新时间：2023-11-03 20:31:53 24 4
gpt4 key购买 nike

我正在使用 w3-css 和 bog-standard css。

我有一个单词的png:INSPIRE，它的字体是透明的。字母后面是彩色矩形。彩色矩形前面是白色矩形，给人以 INSPIRE 字母被填满的印象，具体取决于矩形达到的高度。示例 ( under the link) 将白色矩形设置为 50% 高度。在最初，这些高度是由从数据库中提取的数字决定的，而不是按照脚本中的方式设置。

INSPIRE 的填充是这样发生的:

有一个名为 w3-third 的 'w3 div'，其中有另一个名为 w3-card 的 div，其中是一个普通的 div - 在标题中设置样式- 称为 back，其中包含每个字母 block 的 div，最后是 INSPIRE png 的 div。我使用 z 值，所以 png 位于顶部。

我这辈子都无法让 INSPIRE 图像位于 w3-card div 的中央。

如果我可以挥舞魔杖，那么我会“居中”#back div。我试过设置宽度...

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

但这没有什么区别。

拜托，在我脑袋爆炸之前请帮忙......

下面是链接的完整页面代码:

  

      <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>

最佳答案

只需添加另一个 div，像这样用 id black 包裹 div

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

以防万一你想将 id 为黑色的 div 保持为 position:absolute;

关于javascript - 如何将一个 <div> 置于其他几个 <div> 的中心(混合使用 w3.css 和 css)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40303928/

24 4 0
文章推荐： html - 换行时段落聚类
文章推荐： python - 在 django Updateview 中保存表单集时出现问题
文章推荐： python - Pandas 读取(Excel)文本列，并返回相似度
文章推荐： 从 Java 调用时，Matlab 在库初始化时崩溃
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com