icon要素の位置を文字列の中央（付近）に合わせる pentamania Follow 2018-01-15 19:28:18 License: MIT License Fork0 Fav0 View248 Play Stop Reload Fullscreen Smart Phone Readme JavaScript 0 lines HTML 12 lines SCSS / Compass 21 lines vertical-align: middleを使うと手っ取り早くそれっぽくなるが、微妙に合ってないことがある 綺麗に合わせるならパーセント指定とフォントサイズ差の調整を地道にやっていくしか無いっぽい？ 例えばmaterial iconなら、文字列とアイコンが同じサイズの場合、-15%指定ぐらいでちょうど中央付近になる この場合の一般式 vertical-align: (アイコンサイズ / 文字サイズ) * -15 [%] （フォントやブラウザ環境によってまた微妙に変わるかもしれない。闇） icon要素の位置を文字列の中央（付近）に合わせる <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, user-scalable=no" /> <meta name="apple-mobile-web-app-capable" content="yes" /> <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> </head> <body> <h1 class="i-label"> <i class="material-icons i-icon">face</i>Hello world! </h1> </body> icon要素の位置を文字列の中央（付近）に合わせる * { margin: 0; padding: 0; border: 0; } *, *:before, *:after { box-sizing: border-box; } $fontSize: 50px; $base_align: -15%; .i-label { /* vertical-align: middle; */ font-size: $fontSize; } .i-icon { /* vertical-align: middle; */ vertical-align: $base_align; font-size: $fontSize !important; } vertical-align: middleを使うと手っ取り早くそれっぽくなるが、微妙に合ってないことがある 綺麗に合わせるならパーセント指定とフォントサイズ差の調整を地道にやっていくしか無いっぽい？ 例えばmaterial iconなら、文字列とアイコンが同じサイズの場合、-15%指定ぐらいでちょうど中央付近になる この場合の一般式 vertical-align: (アイコンサイズ / 文字サイズ) * -15 [%] （フォントやブラウザ環境によってまた微妙に変わるかもしれない。闇） <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, user-scalable=no" /> <meta name="apple-mobile-web-app-capable" content="yes" /> <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> </head> <body> <h1 class="i-label"> <i class="material-icons i-icon">face</i>Hello world! </h1> </body> * { margin: 0; padding: 0; border: 0; } *, *:before, *:after { box-sizing: border-box; } $fontSize: 50px; $base_align: -15%; .i-label { /* vertical-align: middle; */ font-size: $fontSize; } .i-icon { /* vertical-align: middle; */ vertical-align: $base_align; font-size: $fontSize !important; } use an iframe compat browser, deer Play on jsdo.it games Author Share ブログに埋め込む QR Tag Download Complete! Description What kind of game? vertical-align: middleを使うと手っ取り早くそれっぽくなるが、微妙に合ってないことがある 綺麗に合わせるならパーセント指定とフォントサイズ差の調整を地道にやっていくしか無いっぽい？ 例えばmaterial iconなら、文字列とアイコンが同じサイズの場合、-15%指定ぐらいでちょうど中央付近になる この場合の一般式 vertical-align: (アイコンサイズ / 文字サイズ) * -15 [%] （フォントやブラウザ環境によってまた微妙に変わるかもしれない。闇） Control Device Smartphone Controllerjsdo.it WebSocket Controller» Mouse Keyboard Touch Device Fullscreen Activated Inactivated jsdo.it games から削除する Submit Author pentamania URLhttp://pentamania.github.io/portal/ アマチュアです。 Tweet Default Panel Auto play Screenshot Readme JavaScript HTML CSS Size Width: px Height: px code <script type="text/javascript" src="http://jsdo.it/blogparts/678O/js"></script> css css3 html5 library&test Discussion Questions on this code? Tags css css3 html5 library&test
