如何根据文本的最高点和最低点垂直对齐文本?

huangapple go评论57阅读模式
英文:

How to align text vertically according to the highest point of the text and lowest point?

问题

我想要将文本垂直居中,使文本的最高点和最低点与包围它的结束 div 的距离相等。

我有以下的 CSS 代码:

padding-left: 30px;
font-family: 'Playfair Display', serif;
font-weight: 100;
width: 140%;
line-height: 68px;
color: #fff;
font-size: 46px;
border-style: solid;
border-color: #1faf2d;
background-color: #1faf2d;
margin-bottom: 0 !important;
margin-top: 38px;

这段代码为字体提供了颜色和高度等样式,使其看起来像下面的图片:
如何根据文本的最高点和最低点垂直对齐文本?

英文:

I want to center a text vertically such that the highest point of the text and the lowest point of text are on equal distance from the ending div that it is enclosed in.

I have the following css code:

padding-left: 30px;
font-family: 'Playfair Display', serif;
font-weight: 100;
width: 140%;
line-height: 68px;
color: #fff;
font-size: 46px;
border-style: solid;
border-color: #1faf2d;
background-color: #1faf2d;
margin-bottom: 0 !important;
margin-top: 38px;

This is what gives the colour and height etc to the font and it look like the below image.
如何根据文本的最高点和最低点垂直对齐文本?

答案1

得分: 1

这只能通过在底部或顶部添加填充来实现,这可能会根据不同的字体而变化。我质疑的是为什么你要这样做?按照你的方式居中对齐会进一步破坏平衡。

此外,某些字母的定位,如 "p"、"g"、"y" 和 "q",比中线低是因为它们的设计和排版规则。这些字母有下行线,是字形的一部分,延伸到基线以下。

下行线在小写字母中很常见,用于保持整体平衡和可读性。它们允许区分类似字形,并有助于创建视觉上愉悦的文本块。

在垂直对齐文本时,需要考虑下行线,以确保适当的间距和平衡。通过对齐文本的基线,包括下行线,可以保持文本的整体视觉和谐,并防止下行线干扰行间距或重叠其他元素。

在垂直对齐文本到最高点和最低点的情况下,下行线会自然使文本看起来更低,因为它们延伸到基线以下。这被认为是保持可读性和保持字体设计意图的正确对齐方式。

值得注意的是,文本的对齐方式可能会根据上下文和排版师或设计师的具体设计选择而有所不同。不同的字体可能具有略有不同的对齐方式,一些艺术或装饰性字体可能会出于创意目的而有意偏离传统的对齐原则。

英文:

This can only be done by adding padding at the bottom or Top and this may vary as per different Fonts. I question is why do you want to do this? As anigning center as per your way would further discurb the balance.

Also, The positioning of certain letters, such as "p," "g," "y," and "q," are lower than the center line is due to their design and the rules of typography. These letters have descenders, which are the parts of the letterforms that extend below the baseline.

Descenders are common in lowercase letters and serve to maintain the overall balance and legibility of the text. They allow for differentiation between similar letterforms and help to create a visually pleasing text block.

When aligning text vertically, the descenders are taken into account to ensure proper spacing and balance. By aligning the baseline of the text, which includes the descenders, it maintains the overall visual harmony of the text and prevents the descenders from interfering with the line spacing or overlapping other elements.

In the case of vertically aligning text to the highest point and lowest point, the descenders will naturally make the text appear lower as they extend below the baseline. This is considered the correct alignment for maintaining legibility and preserving the intended design of the typeface.

It's worth noting that the alignment of text can vary depending on the context and the specific design choices made by the typographer or designer. Different fonts may have slightly different alignments, and some artistic or decorative fonts may intentionally deviate from traditional alignment principles for creative purposes.

huangapple
  • 本文由 发表于 2023年6月2日 12:32:27
  • 转载请务必保留本文链接:https://go.coder-hub.com/76387121.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定