![](https://mnet-company.co.jp/wp-content/uploads/2023/05/image-1.png)
長時間作業しても疲れない!?4スタンス理論から見る本当に自分に合ったマウスの選び方!
![](https://i0.wp.com/mnet-company.co.jp/wp-content/uploads/2023/05/member02.webp?fit=96%2C96&ssl=1)
皆さんはCSSで要素を上下中央揃えにする時にどの方法を使っていますでしょうか?
有名な方法だとtext-align: center;やmargin: 0 auto;などありますが実はそれだけではデザインを再現できない時も・・・
そこで今回は要素の上下中央揃えの方法を実例付きでご紹介しようかと思います。
目次
中身のテキストや画像といったインライン要素の中央寄せは、親となるブロック要素にtext-align: center;を指定します。
こちらはブロックごと中央寄せする方法。widthを指定する必要がありますが%指定をすればレスポンシブwebデザインの対応が可能。合わせてmax-widthを使うこともあります。
親要素にtext-align: center;を指定し子要素にdisplay: inline-block;を指定することで子要素の幅は要素に依存しますが中央揃えをすることができます。
vertical-alignが使えるのはインライン要素orテーブルセルになりますので、上下中央寄せにしたいテキストを内容する要素にdisplay: table-cell;を指定します。
ブロックには、width・heightの指定が必須です。
ですので、内包物の高さがheightを超えてしまった時ははみ出ることになります。
これは中央寄せする要素の左上を起点として上から50%(top: 50%;
)・左から50%(left: 50%;
)の位置に移動させ、要素の大きさの半分ずつを戻す(translate
)、という動きをしています
先ほどのtransform
と異なるのは、中央寄せした要素の横幅が成り行きになること。
ただしモダンブラウザのみの場合に使える方法になりますので注意が必要です。
CSSの中央揃えは一癖ありますが慣れれば状況に応じた中央揃えの指定ができるようになります。
ですので一度色々試してみて状況に応じた挙動を知ることが大切でしょう!
山下 生真
役員
建築家を志し京都の大学を卒業。様々な業種を経て、IT業界に心惹かれ、一心発起し、プログラミングスクールに業務の傍ら通う。趣味のYouTubeの動画編集・撮影活動で現CEOと出会う。幼少期からの夢であった”魔法使いになってみんなの役に立つ”実現の為、IT技術を駆使し、世の中の役に立つことを目標に起業。座右の銘は”野心・向上心”。
長時間作業しても疲れない!?4スタンス理論から見る本当に自分に合ったマウスの選び方!
【Part7】記事取得のカスタマイズが捗る。WP_Queryの使い方。カスタムフィールドの指定編
【ワードプレス】問い合わせフォームから届く、ひたすら迷惑なスパムメールを防ぐ為には?
サステナブルマーケティングとは
対面マーケティングの重要性
AIとグラフィックデザイン: デザイナーは心配すべきか?
最近のマイブーム(おすすめメディア紹介)
Webサイト制作における開発手法
幼稚園でICT活用のメリットを紹介
デジタルヘルスとは?