運用型広告
Google・Yahoo!のリスティング広告はもちろん、Facebook・Instagram・LINE・XなどのSNS広告も運用が可能です。
Web制作
左右中央揃えはmargin:0 auto;など有名ですが
意外と盲点な「上下」中央揃えの紹介をします!
意外と利用用途はあるので知っておくと便利です!
目次 [非表示]
一行しかないテキストにオススメ
行間=親要素の高さにすると親要素に対して上下中央揃えにできます。
※複数行には使えないので注意!
一番コンテンツの多い要素の高さに合わせて上下中央揃えになってくれます。
文字数の差が大きいメニューなどにオススメ。
display: inline-block;vertical-align: middle;
1行でも複数行でもOK!
高さが決まってない場合に、padding上下に同じ値を入れましょう。
padding: 10px 0;
親要素に対して
position:relative;
子要素に
position:absolute;top: 0;bottom: 0;margin: auto;
と記述すると上下中央揃えになります
(left:0; right:0;を加えると上下左右中央にも!)
親要素に
display: flex;
子要素に
align-items: center;
を指定するだけで、上下中央揃えになります!!
個人的に一番シンプルで簡単なのでオススメ◎
Webマーケティングにおけるパフォーマンス改善のための資料がダウンロードできます。