Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

[Style][iOS]The style lineHeight behaves not exactly same as CSS

See original GitHub issue

I write a Text component whose style is：

text: {
    height: 60,
    fontSize: 12,
    width:50,
    padding:5,
    color: 'rgb(238, 238, 238)',
    fontFamily: 'Helvetica Neue',
    lineHeight: 50,
    backgroundColor: 'rgb(190, 173, 146)'
  },

It appears like this in iOS device :

But in Web, it is supposed to be like :

The text should be vertically centered.

Is there any way to fix this ? Some FE is used to use lineHeight=height to make the text vertically centered.

Issue Analytics

State:
Created 8 years ago
Reactions:1
Comments:8 (4 by maintainers)

Top GitHub Comments

9reactions

cxfeng1-zzcommented, Sep 25, 2015

@ide H5 = HTML5 = Web, I used same CSS style in Web, but it behaves differently.

6reactions

cxfeng1-zzcommented, Sep 25, 2015

In addition, the text height measured in RCTMeasure is also not exactly same as H5， about 1.5px smaller than H5’s text height

Top Results From Across the Web

line-height - CSS: Cascading Style Sheets - MDN Web Docs

The line-height CSS property sets the height of a line box. It's commonly used to set the distance between lines of text.

How to Tame Line Height in CSS

Leading and line-height , however similar, have some important differences. To understand those differences, we first have to understand a bit ...

JavaScript: Find DIV's line-height, not CSS property but actual ...

The answer is actually using .clientHeight . As Gaby said, this is not really reliable/trustworthy. However, it is! Here:

Deep dive CSS: font metrics, line-height and vertical-align

We know that unitless line-height is font-size relative, but the problem is that font-size: 100px behaves differently across font-families, so is line-height ......

How CSS line-height works and best practices

Setting it to any pixel value will set it to exactly this value. So if your font-size for example is 16px and you...