是否仅使用javascript/jquery在div中居中显示多行文本？（模拟css文本对齐属性）

我需要在一个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); } //输入是我的文本 函数stru_pad（输入）{ parts=input.split（'\n'）； parts=parts.trim（）； //容器是我的170px宽度div 变量容器=$（“.pc可编辑画布位置处于活动状态。pc可编辑画布处于活动状态。pc矩形”）； 变量大小=获取字符大小（容器）； var chars\u per\u line=获取字符数（容器，大小）； 最大值=每行字符数； parts=parts.map（s=>s .trim（） .padStart（s.length+数学地板（（max-s.length）/2），“\xa0”） .padEnd（最大“\xa0”） ); 控制台日志（部件）； newInput=parts.join（'\n'）； 返回新的输入； } 函数get\u char\u size（div）{ var temp=$（''）.appendTo（div）； //temp是带有“nbsp”的范围 var rect=$（“.pc rectangle”）.find（'span'）[0]。getBoundingClientRect（）； var结果={ 宽度：rect.width， 高度：矩形高度 }; 移除温度（）； 返回结果； } 函数get\u num\u chars（div，char\u size）{ 变量宽度=分区宽度（）； 返回数学地板（宽度/字符大小宽度）； } 每一条线都以它们自己为中心，但不以我的分区为中心。。 如果我在

get\u char\u size

函数的范围内更改字符，则文本会向左或向右移动，但不会在div中居中

如何才能做到这一点？什么我忘记了正确地有每个文本行的长度，并在它们之前和之后添加大量的空间来模拟文本对齐中心

感谢您的帮助

尝试以下方法：

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

我有
A.
厨房
常量fontConstant=1.91；//字体系列：Arial，无衬线
const div=document.getElementById（“中心div”）；
const style=window.getComputedStyle（div，null）.getPropertyValue（'font-size'）；
const fontSize=parseFloat（样式）；
常量字符箭头=div.offsetWidth/（fontSize/fontConstant）；
const innerHtml=div.innerHtml；
const words=innerHtml.split（'\n'）；
const centeredWords=words.map（word=>{
const spacesToAdd=Math.round（（charactersError-word.length）/2）；
让空格=“”；
for（设i=0；i{
newInnerHtml+=word+'\n'
});
div.innerHTML=''+newInnerHtml+''；

Hi Vladimir，你的示例向单词添加额外空格比最长的单词小，但这并不能解决我的问题，他还需要在最长单词前后添加额外空格，使其在div中居中，从而向较小的单词添加相同数量的空格。。例如，如果我的div基于字体大小最多可以有20个字符，如果我们在这个例子中使用我的文本，我想要实现的是：（7个空格）我有（7个空格）（9,5个空格）a（9,5个空格）（6,5个空格）kitchen（6,5个空格）你好，我现在知道了。适当地更新了代码。请记住，您需要根据您的字体更改“fontConstant”。如何找到我的字体的fontConstant？很遗憾，我无法找到不同字体的常量。这是所有字母的平均值，因为一些字母占用更少的空间，而一些字母占用更多的空间（例如i和W）。