Webページ上のテキストと画像をHTMLで中央揃えまたは整列する方法

コンテンツを中央、左、または右に揃えると、ページにコンテンツを配置するのに役立ちます。このチュートリアルでは、HTMLを使用してテキストを整列させる方法を学習します。

Webageでテキストを整列させるには、style属性とプロパティtext-align.を使用できます。

たとえば、次のコードスニペットは、テキスト「サンプルテキスト」を中央に配置します。

<p style="text-align:center;">Sample text</p>

HTMLコンテンツを左または右に揃えるには、centerをleftまたはrightに置き換えます。

このチュートリアルでは、デモンストレーションWebサイトに示されているように、text-alignプロパティを使用して、画像とテキストをWebページの上部セクションの中央に配置するプロセスを実行します。

このコンテンツを中央に配置するには、text-alignプロパティを、ホームページの上部にある背景画像、プロフィール画像、タイトル、サブタイトル、リンクを含む<div>要素に追加します。

index.htmlファイルでこの<div>要素を見つけ、次のように強調表示されたテキストを追加します。

...
<!--First section-->
<div style="background-image: url('https://html.sammy-codes.com/images/background.jpg');
background-size: cover; height:480px; padding-top: 80px; text-align: center;">
  <img src="https://html.sammy-codes.com/images/small-profile.jpeg" style="height:150px; border-radius: 50%; border: 10px solid #FEDE00;">
  <h1 style="font-size:100px; color:white; margin:10px;">Sammy the Shark</h1>
  <p style="font-size:30px; color: white;"><em>Senior Selachimorpha at DigitalOcean</em></p>
  <p style="font-size: 20px; color:#1F9AFE;"><a href="Webpage FilePath";>About this site</a></p>
</div>
...

このHTMLコードの他の部分はプロジェクトに固有ではないため、強調表示されたtext-align属性のみをコピーして追加してください。ファイルを保存して、ブラウザにリロードします。次のようなものを受け取るはずです。

これで、テキストを中央揃えにして配置する方法を理解し、デモンストレーションサイトの上部のセクションのように見えるセクションを作成する必要があります。次のチュートリアルでは、デモンストレーションサイトの中央のセクションを再作成します。