HTMLの中央のテキスト

著者: Tamara Smith
作成日: 28 1月 2021
更新日: 1 J 2024
Anonim
HTMLで文字を中央寄席にする方法【超初心者用】
ビデオ: HTMLで文字を中央寄席にする方法【超初心者用】

コンテンツ

このwikiHowは、HTMLWebサイトのテキストを中央揃えにする方法を説明しています。これにはCSS(カスケードスタイルシートまたはスタイルシート)を使用します。以前は、 センター>タグですが、これはほとんどのブラウザでは機能しなくなりました。

ステップに

方法1/2:CSSを使用する

  1. スタイルを説明するテキストファイルを開きます。 今、 センター>タグは使用されなくなりました。このファイルに新しい要素を作成して、HTMLドキュメントの特定の領域のテキストを中央に配置します。個別のCSSファイルがない場合、コードはHTMLドキュメントの上部の「style>」タグと「/ style>」タグの間にあります。
    • として スタイル>-そして /スタイル>タグはまだありません。タグを直接下に置くことができます。 ボディ>次の方法でタグを付けます。
    • !DOCTYPE html> html>本体>スタイル> /スタイル>

  2. テキストを中央に配置するクラスを作成します。 ザ・ div>タグは、このクラスが関係する特定のセクションをHTMLドキュメントに通知します。 「style」タグの間に次のように入力します。必ず2回クリックしてください。 ↵入力 最初の行の後:

      歌姫 {}

  3. 追加します text-alignプロパティ。 タイプ text-align:center; 中括弧の間 歌姫-セクション。 「ヘッダー」は次のようになります。

      !DOCTYPE html> html> body> style> div.a {text-align:center; } /スタイル>

  4. 正しいものを追加してください div中央に配置するテキストにタグを付けます。 あなたはこれを介して行います div>このテキストの上にタグを付け、 / div>このテキストの下にタグを付けます。たとえば、タイトルとその下の段落を中央に配置する場合は、次のようになります。

      div> h1>私のウェブサイトへようこそ/ h1> p>このウェブサイトは、主に物事に関する情報を提供するためのものです。/p> / div>

  5. 使用 歌姫他の要素を中央に配置するためのタグ。 タグ間のコンテンツなど、別の要素を中央に配置する場合 p> / p> そして h2> / h2>)、入力します div> この要素と / div> その後。 「div.a」をセンタリングCSSコードとしてすでに定義しているため、これらの要素もセンタリングされます。

      style> div.a {text-align:center; } / style> div> h2>寄付は大歓迎です/ h2> p>お願いします/ p> / div>

  6. ドキュメントを確認してください。 もちろん、Webページのテキストは異なりますが、次のようになります。

      !DOCTYPE html> html> body> style> div.a {text-align:center; } / style> div> h1>私のウェブサイトへようこそ/ h1> p>このウェブサイトは主に物事に関する情報を提供するためのものです。/p>/div> div> h2>寄付を歓迎します/ h2> p>お願いします/ p> / div> / body> / html>

方法2/2:HTMLで「center」タグを使用する

  1. HTMLドキュメントを開きます。 このメソッドは、廃止される方法を説明します センター>鬼ごっこ。この方法はまだ多くのブラウザで機能する可能性がありますが、あまり依存しないことをお勧めします。
  2. 中央に配置するテキストを見つけます。 中央に配置するタイトル、段落、またはその他のテキストが見つかるまで、ドキュメントを下にスクロールします。
  3. テキストの両側に「center」タグを配置します。 コードは次のようになります センター>テキスト/センター>。ここで、「テキスト」は中央揃えにするテキストです。このテキストに段落の前に「p> / p>」などの他のタグがある場合は、「center」タグを既存のタグの外側に配置します。

      センター> h1>私のウェブサイトへようこそ/ h1> /センター>センター>快適に!/センター>

  4. HTMLドキュメントを確認してください。 次のようになります。

      !DOCTYPE html> html> body> h1> center>私のウェブサイトへようこそ/ center> / h1> center>自分で簡単に!/ Center> p1>このウェブサイトは、主に物事に関する情報を提供するためのものです。/p1> / body > / html>