要让水印中的文字居中,可以使用 CSS 中的 text-align
属性。在给水印元素设置样式时,将 text-align
设置为 center
即可。
以下是修改后的代码示例:
function addWatermark(watermarkText, intervalX, intervalY) {
var body = document.body;
var width = window.innerWidth;
var height = window.innerHeight;
for (var x = 0; x < width; x += intervalX) {
for (var y = 0; y < height; y += intervalY) {
var watermark = document.createElement('div');
watermark.style.pointerEvents = 'none';
watermark.style.position = 'fixed';
watermark.style.left = x + 'px';
watermark.style.top = y + 'px';
watermark.style.color = 'rgba(0, 0, 0, 0.1)';
watermark.style.fontSize = '20px';
watermark.style.textAlign = 'center'; // 居中对齐
// 设置水印文本为两行
watermark.innerHTML = watermarkText.split('\n').join('<br>');
body.appendChild(watermark);
}
}
}
在上述代码中,我们添加了一行 watermark.style.textAlign = 'center';
来设置水印元素中的文本居中对齐。这将使每个水印元素内部的文本在水平方向上居中显示。
内容由零声教学AI助手提供,问题来源于学员提问