デザインのレイアウトの都合上、絶対配置(position: absolute)と中段寄せ(vertical-align: middle)を併用しなければいけないケースがあります。
ただ中段寄せをするためにはdisplay: table-cellにする必要があります。
同じタグにabsoluteとtable-cellは併用出来ない?
vertical-align: middleの文章
div { position: relative; } p { position: absolute; vertical-align: middle; top: 0; left: 0; }上記の様に記述してしまうとvertical-align:middleが効きません。
absoluteを指定したタグはブロック要素となるためtable-cellが使用できなくなるからです実現するためには
タグを1つ増やし親のタグに絶対配置、子のタグに中段寄せを設定すれば実現出来ます。
vertical-align: middleの文章
div { position: relative; } p { display: table; position: absolute; top: 0; left: 0; } span { vertical-align: middle; }関連ページ
![]()
- UNVENT BLOG
- 2014年06月03日日
【html5】iPhoneとAndroidでwebページのフォームからカメラ・アルバムで画像を投稿
![]()
- UNVENT BLOG
- 2016年09月17日日
初心者にやさしく!!Windowsでgulp + sass(compass)でコーディングの効率をアップ!
![]()
- UNVENT BLOG
- 2016年12月11日日
ionic2 ナビゲーションバーとツールバーに独自画像を表示させるには
![]()
- UNVENT BLOG
- 2016年12月16日日
ionic2 navbarにある「戻るボタン」の「戻る」を消したい – アプリ全体適用編
![]()
- UNVENT BLOG
- 2016年10月31日日
【Linux】cronのコマンド備忘録
![]()
- UNVENT BLOG
- 2017年01月21日日
ionic2 コンポーネントにテンプレートのタグ(セレクタ)からパラメータを渡したい