仅使用javascript/jQuery在div中居中多行文本？（模拟css文本对齐属性）

Question

我需要在div中居中一个多行文本，而不使用css，只使用js。例如，我有一个170px宽的div，一个SourceSansPro常规字体和18px的字体大小，例如：

i have
a
kitchen

我试图实现的结果是在这个170px宽度的div中居中每一行，就像在每个单词前后添加空格一样。

这是我的代码，但现在没有好的结果：

    //input is my text
    function str_pad (input) { 
        
        
        parts = input.split('\n');
        parts = parts.trim();
        //container is my 170px width div
        var container = $(".pc-editable-canvas-positions-active .pc-active-editable-canvas .pc-rectangle");
        var size = get_char_size(container);
        var chars_per_line = get_num_chars(container, size);
        max = chars_per_line;
    
        parts = parts.map(s => s
            .trim()
            .padStart(s.length + Math.floor((max - s.length) / 2), '\xa0')
            .padEnd(max, '\xa0')
        );
        console.log(parts);
        newInput = parts.join('\n');
    
        return newInput;
    }
    
    function get_char_size(div) {
        
        var temp = $(' ').appendTo(div);
        //temp is a span with a "nbsp"
        var rect = $(".pc-rectangle").find('span')[0].getBoundingClientRect();
        var result = {
            width: rect.width,
            height: rect.height
        };
        temp.remove();
        return result;
    }
    
    function get_num_chars(div, char_size) {
        var width = div.width();
        return Math.floor(width / char_size.width);
    }

每一行都是以自己为中心，但不是以我的div为中心。。如果我更改了get\u char\u size函数范围内的字符，则文本会向左或向右移动，但不会在div中居中。。

如何实现这一点？我忘记正确地拥有每个文本行的长度，并添加它们前后的良好空间数量来模拟文本对齐中心？

谢谢你的帮助

Answer 1

尝试以下操作：

<div id="center-div">i have
a
kitchen</div>

const fontConstant = 1.91; // for font-family: Arial, sans-serif

const div = document.getElementById("center-div");

const style = window.getComputedStyle(div, null).getPropertyValue('font-size');
const fontSize = parseFloat(style);

const charactersPerRow = div.offsetWidth / (fontSize / fontConstant);

const innerHtml = div.innerHTML;

const words = innerHtml.split('\n');

const centeredWords = words.map(word => {
  const spacesToAdd = Math.round((charactersPerRow - word.length) / 2);
  let spaces = '';
  for (let i = 0; i < spacesToAdd; i++) {
    spaces += ' ';
  }
  return spaces + word + spaces;
});

let newInnerHtml = '';

centeredWords.forEach(word => {
    newInnerHtml += word + '\n'
});

div.innerHTML = '<pre>' + newInnerHtml + '</pre>';