javascript - 如何使用 javascript 使 div 中的文本居中

Question

我有一个 javascript 代码，它生成 html 以用 css 构建一个栏，但我需要在栏中间居中放置一个文本，这是我的代码：

                render: function(data, type, row, meta){
                    coord_str = data;
                    return $("<div></div>", {
                        "class": "bar-chart-bar"
                    }).append(function(){
                        var bars = [];
            color = 'blue';                         
                        }                           
                            bars.push($("<div></div>",{
                                "class": "bar " + "bar1"
                            }).css({
                                "background-color": color,
                                "width": coord_str + "%"
                            }))
                        return bars;
                    },"50%").prop("outerHTML")
                }

我希望“磁盘”列中的文本“50%”位于条形图的中心

有人能帮我吗？这似乎是css的基本内容，但我没有给出错误。

标签： javascriptcssarrays

Answer 1

使用 Flexbox 非常简单：

div {
  position: relative;
  width: 200px;
  height : 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  border : green solid 2px;
}

div:before{
  content: "";
  background: lightblue;
  position: absolute;
  top: 0;
  left: 0;
  width : 60%;
  height: 100%;
}

span{
   z-index : 1;
}

<div>
  <span>Centered text!</span>
</div>