Last active
July 30, 2020 08:58
-
-
Save njleonzhang/963b221f6bb0bf8aa54c0dfdc01eb581 to your computer and use it in GitHub Desktop.
android 不居中问题
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
试试: | |
1. line-height 设置为 normal | |
2. inline 元素,底部距离 (将其父元素的 font-size 设置为 0) | |
3. 字 + iconfont 的场景,不设置父元素高度由子元素撑开的时候,图标可能会有明显的偏差。 | |
``` | |
.mp-article-content-more-text { | |
position: absolute; | |
bottom: 50px; | |
left: 0; | |
right: 0; | |
display: block; | |
text-align: center; | |
font-style: normal; | |
display: flex; | |
align-items: center; | |
justify-content: center; | |
font-size: 0; | |
height: 60px; // 高度要设置大一点,否则 icon 偏离的很严重。 | |
span { | |
margin-right: 10px; | |
font-size: 34px; | |
} | |
.mp-article-content-more-icon { | |
display: block; | |
line-height: 1; | |
font-size: 36px; | |
&::before { | |
display: block; | |
} | |
} | |
} | |
<div class="mp-article-content-more-text"> | |
<span>点击查看全文</span> | |
<i class="mp-article-content-more-icon article-iconfont article-icon-arrow-down"></i> | |
</div> | |
``` |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment