我需要在div中居中一个多行文本,而不使用css,只使用js。例如,我有一个170px宽的div,一个SourceSansPro常规字体和18px的字体大小,例如:
i haveakitchen
我试图实现的结果是在这个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中居中。。
如何实现这一点?我忘记正确地拥有每个文本行的长度,并添加它们前后的良好空间数量来模拟文本对齐中心?
谢谢你的帮助
尝试以下操作:
<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>';
我有一个“p”标记,它是内联的(我不想显示它块),但当我使用时,它不起作用。 HTML: CSS:
问题内容: 我有一个div 。其内容水平和垂直居中。 当div中的内容太长时,内容将自动换行。但是在这种情况下,对齐方式会中断。请参阅摘要。 如果我添加正确显示。但是,为什么没有中心呢? 问题答案: flex容器的HTML结构具有三个级别: 容器 该项目 内容 每个级别代表一个独立的独立元素。 该属性是在flex容器上设置的,用于控制flex项目。它不能直接控制项目的子项(在这种情况下为文本)。
问题内容: 下面的代码(也可以在JSFiddle上作为演示使用没有将文本放在中间,正如我理想中的那样。即使使用属性,我也找不到任何方法可以使文本垂直居中。我怎样才能做到这一点? 问题答案: 创建一个用于文本内容的容器,也许是。 JSFiddle
我的文本从divs顶部对齐有问题。 以下是HTML: 以下是CSS: 如何制作文本 Lorem Ipsum Lorem Ipsum只是印刷和排版行业的虚拟文本。自16世纪以来,Lorem Ipsum一直是业界的标准虚拟文本... 是否从.txt div的中心对齐?谢谢你的帮助
问题内容: 我在div内有一个图像和一些文本,我想使用CSS将图像和文本放在div的垂直中心。问题是我不知道会有多少行文本,但是文本和图像必须始终在中间。例如,当只有一行文本时,div应该如下所示: 如果最终我有更多行或文本的高度大于图像的高度,则图像应对齐,如下所示: 我很难获得这种效果,没有使用javascript可以做到这一点吗? 观察 我指的div的父div具有position:relat
问题内容: 有没有办法像JTextField一样为JTextArea创建水平居中的文本? 有没有办法用多行文本区域完成相同的事情?我用JTextArea找不到方法,所以还有其他选择吗?JTextPane?如果是这样,怎么办? 问题答案: 您需要使用JTextPane并使用属性。以下应该使所有文本居中: 编辑: 据我所知,不支持垂直居中。以下是一些可能会有用的代码:JTextPane的垂直对齐