Q&A
前提
独学でのWeb学習の一環でサイトを１つ作ろうとしています。
その際に躓いたことがあるので、この場を借りて質問させていただきます。
実現したいこと
タイトルの通りですが、ロゴとタイトルを横に並べて表示したものを中央寄せにしたいです。
html
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <link rel="stylesheet" href="css/style.css"> 7</head> 8<body> 9 <header> 10 <img src="img/logo.jpg" alt="ロゴ"> 11 <h1>Document</h1> 12 </header> 13</body> 14</html>
css
1header { 2 3 text-align: center; 4} 5 6img { 7 8 float: left; 9}
上記のコードの場合画像だけが左に寄ってしまい、タイトルが中央寄せになってしまうので、実現したい内容と異なってしまいます。
試したこと
::beforeを使用すれば実現できるかと思ったのですが、以下のコードだと画像が表示されず断念してしまいました。
css
1h1::before { 2 3 content: url("img/logo.jpg"); 4}
環境
MacOS Mojave 10.14.6
Firefox 71.0
最後に
基礎的なことで申し訳ないのです。自身の検索能力が足りず答えを見つけることができませんでした。
どうかよろしくお願い致します。
回答1件
0
ベストアンサー
Flexboxを使うと簡単です。
css
1header { 2 display: flex; 3 justify-content: center; /*水平方向中央寄せ*/ 4 align-items: center; /*垂直方向中央寄せ*/ 5}
投稿2020/01/07 10:00
編集2020/01/07 10:01
総合スコア33699
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
退会済みユーザー
2020/01/13 08:25