37

我注意到一起使用letter-spacing和text-align: center一起使用的奇怪行为。增加空间，使文本更靠近元素的左边距。

div {
  width: 400px;
  height: 200px;
  background-color: #3b0d3b;
  text-align: center;
  margin: auto;
}

p {
  color: #fff;
  margin-top: 40px;
  text-align: center;
  padding-top: 10px;
  font-size: 1.2em;
}

.spacing {
  letter-spacing:.4em; /* This property is the problem */
}

.spacing-large {
  letter-spacing:.9em; /* This property is the problem */
}
<div>
  <p>- Foo Bar Zan -</p>
  <p class="spacing">- Foo Bar Zan -</p>
  <p class="spacing-large">- Foo Bar Zan -</p>
</div>

我在上一个 Firefox 和 Chrome 上发现了相同的行为。有没有办法解决这个问题？

4

7 回答 7

94

看来您需要将文本缩进与字母间距相同的量。第一个字母没有应用到左侧的间距

div {
  width: 400px;
  height: 400px;
  background-color: #3b0d3b;
  text-align: center;
  margin: auto;
}

p {
  color: #fff;
  background: black;
  text-align: center;
  font-size: 1.2em;
  padding: 0;
  margin: 0;
}

.spacing {
  letter-spacing: .4em;
}

.spacing-large {
  letter-spacing: 0.9em;
  text-align: center;
  text-indent: 0.9em;
}
<div>
  <p>- Foo Bar Zan -</p>
  <p class="spacing">- Foo Bar Zan -</p>
  <p class="spacing-large">- Foo Bar Zan -</p>
</div>

我想出的合乎逻辑的解释是 - 因为它是第一个字母，左侧的间距将不适用。

于 2014-02-06T19:30:51.453 回答
8

如果文本分成两行，使用填充会更安全。text-indent 只会缩进文本的第一行。

p { 
  padding-left: 0.9em; 
}
于 2016-08-11T09:34:11.047 回答
1

如果您仔细观察，没有字母间距的顶部也没有正确居中。我唯一能想到的就是用猴子修补它margin-left: 15px：

p { margin-left: 15px; }
于 2014-02-06T19:33:38.953 回答
1

设置与字母间距相同的负边距。所以如果你的字母间距是 10px，设置margin-right:-10px.

使用text-indent会在第一个字母前面留下那个空间，即使父元素太小而无法容纳内容，导致它看起来不居中。

于 2019-10-17T20:51:08.463 回答
0

我发现解决字母间距单词偏离中心的最佳答案是简单地放在&nbsp;单词前面。

于 2020-12-07T21:48:56.803 回答
0

letter-spacing本质上是不平衡的，出现在每个字母之后。你可以用负数来补偿它margin-right。

例如，在带有 TypeScript 和样式组件的 React 中：

import React from 'react'
import styled from 'styled-components'

/**
 * Center text, accounting for letter-spacing.
 */
export const CenterText: React.FC<{
  className?: string
  letterSpacing: string
}> = ({ children, className, letterSpacing }) => {
  return <Body {...{ className, letterSpacing }}>{children}</Body>
}

/**
 * Negative right margin handles inherent imbalance in letter-spacing.
 * `justify-content: center` handles both narrow content and overflow.
 * `text-align: center` aligns multiple lines of text when text wraps.
 */
export const Body = styled.div<{ letterSpacing: string }>`
  display: flex;
  justify-content: center;
  letter-spacing: ${o => o.letterSpacing};
  margin-right: -${o => o.letterSpacing};
  text-align: center;
`
于 2021-10-08T19:07:05.377 回答
0

这种行为是因为在最右边的字母的右侧添加了额外的空间（由于增加了字母间距）。

在这种情况下，有一种更简单的方法可以实现中心对齐。只需从最后一个字母表中删除字母间距属性

这是一个解决方案。

div {
  width: 400px;
  height:400px;
  background-color: #3b0d3b;
  text-align:center;
  margin:auto;
}

p {
  color:#fff;
  margin-top: 40px;
  text-align:center;
  padding-top:30px;
  font-size: 1.2em;
}

.spacing {
  letter-spacing:.4em;
}

.spacing-large {
  letter-spacing:.9em;
}
<div>
  <p>- Foo Bar Zan -</p>
  <p class="spacing">- Foo Bar Zan <span style="letter-spacing:0">-</span></p>
  <p class="spacing-large">- Foo Bar Zan <span style="letter-spacing:0">-</span></p>
</div>

注意嵌套最后一个字符的 span 元素。

于 2020-09-16T17:32:37.857 回答