在Mac上，行高不是垂直居中文本，而是在Windows上看起来很好 [英] Line-Height not vertically centering text on Mac but looks fine on Windows

问题描述

我创建了一个显示浏览器页面大小的页面。问题在于文本显示浏览器的高度和宽度。虽然文本在Windows计算机上完美对齐，但在Mac上查看时，它们显得非常不利。当使用外部资源（

I've created a page that displays the size of your browser page. The problem lies with the text displaying the height and width of the browser. While the text aligns perfectly on Windows computers they appear severely off when viewing on Macs. Its also worth noting this issue occurs when using an external resource (http://fonts.com) to generate the desired font 'Rockwell Extra Bold'.

Site Link: http://howbigismybrowser.com/

The essential CSS of the container holding the text is as follows:

#display: {
    background: #232323; border: 15px solid #fff;
    color: #fff;
    font-family: 'Rockwell W01 Extra Bold', Arial, sans-serif;
    font-size: 4.063em;
    text-align: center;
    height: 170px;
    line-height: 170px;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    z-index: 2;
}

Update:

'display: table' applied but for some reason font has extra space at the bottom. Doesn't appear to be extra margin or padding.

解决方案

It seems to be that the line-height of the font you're using is rendered differently as you've already suggested. I tried changing the font-family in the inspector: some fonts work well using the line-height trick, others don't. What about other ways of vertical centring, like this:

<!-- language: lang-css -->
#display {
    /* line-height: 170px; */
    /* height: 170px; */
    display: table;
    [...]
}

#width, #height {
    /* float: left; */
    /* height: 100%; */
    display: table-cell;
    vertical-align: middle;
}

No doubt, you'll need to fix some other styling, but this can be an effective way of doing the same thing but not relying on line-height.

Reference: http://css-tricks.com/centering-in-the-unknown/

这篇关于在Mac上，行高不是垂直居中文本，而是在Windows上看起来很好的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！