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

投稿日: 2022-04-20 2022-10-18
タグ: html, Spin Up

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

Webageでテキストを揃えるには、 style 属性とプロパティ text-align.

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

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

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

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

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

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

...
<!--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>
...

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

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

getdocs

13036