株式会社マイティーエース- MightyAce Inc.

資料請求

お問い合わせ

運用型広告

Google・Yahoo!のリスティング広告はもちろん、Facebook・Instagram・LINE・XなどのSNS広告も運用が可能です。

マンガ制作

WEBマンガを中心に、LP・バナー・SNSなど、お客様の商品(サービス)の魅力を伝える完全オリジナルのマンガを制作いたします。

Webページ制作

ページに訪れるユーザーの目的と興味を引く、お客様一人一人のニーズに合わせた完全オリジナルのWebコンテンツを制作いたします。

アクセス解析

精度を高めつつ分析⇒改善のサイクルを回し続け、意思決定に繋がるレポーティングで売上最大化のお手伝いをいたします。

Web制作

【CSS】意外と盲点『上下』中央ぞろえ

左右中央揃えはmargin:0 auto;など有名ですが

意外と盲点な「上下」中央揃えの紹介をします!

意外と利用用途はあるので知っておくと便利です!

 

●line-height

一行しかないテキストにオススメ

行間=親要素の高さにすると親要素に対して上下中央揃えにできます。

※複数行には使えないので注意!

 

●display:inline-block; vertical-align:middle;

一番コンテンツの多い要素の高さに合わせて上下中央揃えになってくれます。

文字数の差が大きいメニューなどにオススメ。

display: inline-block;vertical-align: middle;

★padding

1行でも複数行でもOK!

高さが決まってない場合に、padding上下に同じ値を入れましょう。

padding: 10px 0;

●position

親要素に対して

position:relative;

子要素に

position:absolute;top: 0;bottom: 0;margin: auto;

と記述すると上下中央揃えになります

(left:0; right:0;を加えると上下左右中央にも!)

 

●display:flex;

親要素に

display: flex;

子要素に

align-items: center;

を指定するだけで、上下中央揃えになります!!

個人的に一番シンプルで簡単なのでオススメ◎

Request Materials資料請求

資料請求

Webマーケティングにおけるパフォーマンス改善のための資料がダウンロードできます。

  • web広告の改善事例が知りたい方
  • 現在お願いしている代理店との比較をしたい方
  • サービスの全体像・料金を知りたい方