Created
November 4, 2020 01:45
-
-
Save xsthunder/76132d19e7fff02e16bcd25bdfd13f50 to your computer and use it in GitHub Desktop.
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
| .container{ | |
| width: 500px; | |
| display: flex; | |
| flex-direction: column; | |
| background: yellow; | |
| text-align: center; | |
| } | |
| .container-eachline{ | |
| margin-top: 10px; | |
| margin-bottom: 10px; | |
| line-height: 40px; | |
| } | |
| img{ | |
| width:30px; | |
| vertical-align:middle; | |
| } | |
| span{ | |
| padding-left: 8px; | |
| padding-right: 8px; | |
| vertical-align:middle; | |
| } |
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
| <div class="container"> | |
| <div class="container-eachline"> | |
| <img src="https://github.githubassets.com/images/spinners/octocat-spinner-128.gif"/> | |
| <span>标题</span> | |
| <img src="https://github.githubassets.com/images/spinners/octocat-spinner-128.gif"/> | |
| </div> | |
| <div class="container-eachline"> | |
| <img src="https://github.githubassets.com/images/spinners/octocat-spinner-128.gif"/> | |
| <span>标题标题</span> | |
| <img src="https://github.githubassets.com/images/spinners/octocat-spinner-128.gif"/> | |
| </div> | |
| </div> |
Author
Author
Author
效果
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
css设置span和img垂直居中(设置line-height失效) - 刘小笛呀的个人空间 - OSCHINA - 中文开源技术交流社区 关键是
line-heightvertical-align使得图片和文本居中