javascript - 更改命令 text-align :center is relative to in css

标签 javascript html css

我需要一种方法使文本围绕一个特定符号或字符居中(或对齐)。文本是通过 javascript 中添加符号的函数的用户输入。

我的文本设置为每 2 个单词有一个换行符。我在这两个词之间加了一个点。我需要将每条线设置为居中,但相对于它们之间的点而不是相对于传统中心。它不必完全居中,我只需要让每个点都在另一个点的正下方(周围的文本相应地移动)。文本打印为一个连续的字符串,但它只是中断以转到下一行:see this image .

我将点本身设置为函数内的一个类。这是将它们放入的函数的样子:see this image .我可以只编辑 css 中的点,但是当我尝试使用 css 使点居中时,它什么也不做。我认为是因为当文本居中时它不知道按比例移动文本。

文本每次都是原创的,所以单词的长度不会一致,这就是为什么我需要它相对于 don 而不是长度的中间。

如果需要更多信息,请询问我很感激能得到帮助:)

最佳答案

在 HTML 中制作行,如下所示:

<div><span>longer text</span><span>•</span><span>shrt txt</span></div>
<div><span>shrt txt</span><span>•</span><span>longer txt</span></div>

使用这个 CSS:

span {display: inline-block;}
span:nth-child(1) {width: calc(50% - 15px); text-align: right;}
span:nth-child(2) {width: 30px; text-align: center;}
span:nth-child(3) {width: calc(50% - 15px); text-align: left;}

工作示例:https://codepen.io/anon/pen/WZJQNX

关于javascript - 更改命令 text-align :center is relative to in css,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46654335/

相关文章:

javascript - 使用封面背景图像调整元素大小

jquery - 使用 API 数组在我的 html 的每个 h4 上写文本

javascript - 如何在 angularjs 中使用 ng-model 调用方法

javascript - 需要在特定索引处重叠数组的子数组

javascript - 重用具有不同样式的 React 组件

html - div 内的 Bootstrap 垂直按钮

javascript - 无法在 View 目录中查找 '/user/profile'

html - 如何像黑色标题框一样显示 YouTube?

HTML/CSS - 按钮在另一个元素下排列

css - 如何在 SASS/SCSS 中创建硬停止背景?