CSSのセンタリングに詰まった話
おはよー！！！！！！！！gifuです
久しぶりのブログです！
今はHTMLとCSSを使って自身のポートフォリオサイトを作っているのですか、そこでちょっと詰まってしまいました…
それはセンタリング（中央揃え）です。
左右のセンタリングはそこまで難しくなくできたのですが、上下となると調べた方法を試してもうまくいかない…という状況に陥っていました。
そこでツイッターで「わからん…わからんぞ…」とつぶやいていたら、心優しい方が「大丈夫か〜」と声をかけていただいて、もう感謝感激です…！
しかし思ったのは、どう質問したらいいのかもわからんぞ…？ということでした
自分の陥っている状況や実装したいことなどの前提情報を伝えなければ、手を差し伸べてくれる人も手助けのしようがないと考えます。
しかし、自分の状況をできるだけ簡潔に伝えたいが、どこまで伝えればいいのかわからない…
そこで、このブログで今わからないこと、現在の状況、実装したいこと、自分なりの解決法を書き出してみようと思います！！
こういうやり方もあるよ〜という方は是非教えてください！！
実装したいこと
- ブラウザの画面幅いっぱいに写真を表示して、その中央にテキストを表示したい
- ブラウザの画面が変わってもテキストは常に中央に表示されるようにしたい（pxではなく相対表示の方がいいのか？）
こんな感じです。
最終的な解決法
自分なりに調べて、最終的にこんな感じになりました
このサイトがうまく行きました
www.webmagazine.kakisiti.co.jp
HTML
<link rel="stylesheet" href="stylesheet2.css"> <div class="mainvisual-wrapper"> <h1>Lifestyle Update</h1> </div>
.mainvisual-wrapper { height:100vh; background:url(がぞう) no-repeat top center; background-size:cover; } .mainvisual-wrapper h1 { color: white; font-size:60px; letter-spacing:5px; position:relative; top:45%; -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -webkit-transform: translateY(-50%); transform: translateY(-50%); }
背景画像を敷き、その上にh1のテキストを表示する形です。
- .mainvisual-wrapper の height を100vhにすることで、ブラウザの幅いっぱいに写真が表示されます。
- position:relative; と top:45%; で上から45％位置に表示されます。
- transformプロパティで常に中央に表示されます。
これでいいのか
これで正しいのかどうかはわからないけど、自分の想定している挙動になったのでひとまずよしとしています。
何かおかしい点などあれば是非教えてください…！！
今日もここまで読んでくれてサンキュー！！
