HTML
 Computer >> コンピューター >  >> プログラミング >> HTML

HTMLでテキストを中央揃え

HTMLでテキストを中央揃えにする方法

プログラマーとして最初に学ぶことの1つは、テキストのブロックを整列させる方法です。この記事では、style属性とalign属性を使用して、コンテナの中央にテキストを配置する方法を見ていきます。

スタイル属性

htmlでdivを操作しているときは、style属性を使用してインラインスタイルを組み込むことができます。 CSSプロパティtext-alignを使用します テキストを<div>の中央に配置します 。

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Center with Style Attribute</title>
</head>
<body>
   <div class="container" style="text-align:center;">
       <p>Text to center</p>
   </div>
</body>
</html>

属性の整列

HTMLのテーブルを操作する場合は、align属性を使用できます。 <col>でのみ機能します 、<colgroup><tbody><td><tfoot><th><thead><tr> 要素。

<!DOCTYPE html>
   <head>
       <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
       <title>Center with Align Attribute</title>
   </head>
   <body>
       <table border=1 width="800" align="center">
           <tr>
             <th>Month</th>
             <th>Savings</th>
           </tr>
           <tr align="center">
             <td>January</td>
             <td>$100</td>
           </tr>
           <tr align="center">
             <td>February</td>
             <td>$80</td>
           </tr>
         </table>
   </body>
</html>

テキストを中央揃えにすることを学ぶときに覚えておくべき重要なことは、配置はコンテナが入っているコンテナに依存するということです。コンテナがページの半分しか占めていない場合、ページ全体ではなく、そのコンテナの長さ全体に中央揃えされます。

これですべてです。これで、テキストを<div>の中央に配置する方法がわかりました。 要素と<table> 要素。


  1. HTMLプレースホルダー属性

    HTMLプレースホルダー属性は、 input / textareaに表示されるテキストを表します ユーザーが何かを入力し始める前の要素。 構文 以下は構文です- <tagname placeholder=”text”></tagname> HTMLプレースホルダー属性の例を見てみましょう- 例 <!DOCTYPE html> <html> <style>    body {       color: #000;       he

  2. HTMLテキストフォーマット

    HTMLテキストフォーマットとは、HTMLドキュメントのコンテンツをフォーマットするために特別に設計されたHTML要素を指します。 構文 以下は構文です- <tagname>content</tagname> HTMLのテキストフォーマットタグは次のとおりです。 Sr.No。 タグと説明 1 HTMLドキュメントで太字のテキストを指定します。 2 HTMLドキュメントで強調されたテキストを指定します 3 HTMLドキュメント内の斜体のテキストを指定します。 4 HTMLドキ