如何使用JavaScript在div内居中放置文本

Question

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

                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的基本知识，但我不接受错误。

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> 

Answer 2

准备。

.bar-text {
    z-index-1; 
    position: absolute;  
    width: 100%; 
    text-align: center; 
    margin-top: -2px;
}