この Codelab では、皆さんのお気に入りのセンタリング方法を共有し、紹介するための準備をします。 CSS。
ブログ投稿「Centering in CSS」(CSS のセンターリング)で、 CSS で中央寄せる方法が よく使われていますまたは、こちらの動画をご覧ください。
セットアップ
- [Remix to Edit] をクリックして、プロジェクトを編集可能にします。
app/index.html
を開きます。line 23
で、/* your centering CSS here /*
を実際の CSS に置き換えます。- (省略可)センタリング手法に名前を付け、
<h1>
のテキストを置き換えます
スタイル
app/css/
フォルダに新しいファイルを作成します- センタリング ソリューションを保持するセレクタを作成します。たとえば、
.turbo-center
や[floaty-mcfloat]
- 新しいセレクタ内に、センタリングの手法を入力します(
(
app/css/
のもう一つは、例として) - (省略可)「サポート スタイル」と記述します。どの子供たちが 中央に配置するのをサポートする
app/css/index.css
を開き、下部にある新しいファイルをインポートします。
すべてをまとめる
app/index.html
を再開<article>
を見つけて、ステップ 2 で作成したカスタム セレクタを指定します。 説明します。- あなたの Glitch をツイートしていただければ、こちらで紹介させていただきます。 ブログ投稿をご覧ください。