HTML 中央揃え

WBOY

リリース： 2024-09-04 16:39:06

オリジナル

1008 人が閲覧しました

tag は HTML タグの 1 つです。ドキュメント内でこれらのタグを使用すると、段落、単語、または任意のテキスト値が Web ページの中心位置に揃えられます。 Html では、これらのタグは CSS スタイルの代わりに Html5 を除くすべてのバージョンを使用し、要素を中心位置に揃えるプロパティを持ちます。 HTML では、強調表示して引き付けるための別の機能セットがあります。フォントサイズ、色、境界線、メニューバーの配置、スクロールバー、ナビゲーションバーなどの配置により、Web ページや Web サイトのユーザーの性質が変化します。これらは、Web ページをより魅力的に使用するための HTML の機能です。

構文:

すべての HTML タグには、HTML dtd プロシージャ内で Web ページを使用するための異なる構文セットがあるとすでに述べました。これは、HTML には、プロジェクトを正常に完了するための顧客の要件を使用するための事前定義されたタグがあるためです。その

に基づいて、タグには、HTML 要素を使用してドキュメントと適切に調整するための構文が含まれています。


<center>
-----Some codes---
</center>

ログイン後にコピー

上記のコードは、データを Web ページの中心位置に合わせて配置する場合に、Web ページの作成に使用するときの基本的な構文です。

HTML では、

を使用します。他の事前定義されたタグと組み合わせるタグ。また、ユーザーの要件に基づいて、

を使用する場合もあります。他の HTML 要素と同様に、タグの要素の中心位置に合わせて、分割された要素を含むタグを作成します。

HTML で中央揃えを作成するには?

HTML では、中央に揃えるテキストまたは値を含むブロックが 1 つ以上あり、

が使用されます。 HTML コード内のタグを使用することも、開始タグの属性を利用していくつかの CSS スタイルを使用し、プロパティ「text-align」とともに使用することもできます。 HTML の

を使用して段落の値を中央に揃えます。プロパティ値を「text-align=center」に設定し、その値を属性に割り当てることで段落タグを作成します。これにより、指定した要素が中央に配置されます。

タグは現在、一部の HTML バージョンで非推奨になっていると考えられていますが、HTML で好まれているため、CSS では引き続き動作する可能性があります。したがって、中央のような配置を使用する場合は CSS スタイルを使用します。上の段落の CSS プロパティを使用して、データの中心位置を揃えることができます。 HTML 要素は一般に、そのブロックレベルまたはインラインコンテンツを水平位置で表示するブロックレベルの要素と見なされます。要素のスタイル属性を使用して単語の中心を揃えるブロックが 1 つだけまたは多数あるとします。のようなタグを使用して、テキスト領域の複数のブロックが中央に配置されているとします。 … のように、初期に検討したとおりです。セクション。

…

タグは、段落形式で表示されるタグのセットごとに使用されます。他のタグのセットを使用できず、中央の位置に配置できない場合は、

で CSS スタイルの中心クラスを呼び出すことができます。

を使用タグ;クラスを作成すると、任意の HTML タグにそのクラスを利用できます。たとえば、

と記述することで、見出しタグに指定した値を中心位置に揃える場合です。写真、ビデオ、GUI などを整列させることはできますが、中央の位置はで難しくありません。 img は、ブロックレベル要素と比較した場合、インライン要素ブロックであることが異なるためです。インライン要素をスタイルに追加するのは、ドキュメント内で 1 回だけにしてください。何かのように複数の画像を中央の位置に揃えたい場合は、CSS スタイルのクラスを作成して定型コードや冗長なコードを減らし、Web ページの読み込みを高速化します。

CSS スタイルを扱うときは、一連のコードを使用してフォントを適切に配置し、高さと幅を指定し、境界線とパディングを追加します。場合によっては、「margin-left: auto」や「margin-right: auto」などのオプションにより、ユーザーの要件に基づいてマージンが自動的に設定されます。これにより、Web サイトと Web ページでマージンのどちら側をより柔軟にするかが決まります。のような HTML でアニメーションを使用すると、タグを使用すると、HTML コーディングで宣言した内容に基づいて水平または垂直に単語が配置されるため、通常とは異なる位置に単語が配置されます。

HTML Align Center の例

次にいくつかの例を示します:

例 #1




<div>
<center>Welcome To My Domain.</center>
<p>Welcome To My Domain.</p>
<p><b>Welcome</b>Users</p>
</div>

ログイン後にコピー

出力:

HTML 中央揃え

Example #2


<div align="center" style="border:3px solid green">
Welcome To My Domain
</div>
<p><b>Welcome</b>Users</p>

ログイン後にコピー

Output:

HTML 中央揃え

Example #3


<style>
.sample {
color: green;
border: 3px blue;
margin-left: auto;
margin-right: auto;
}
h1  {
color: initial;
}
</style>


<div align="center" class="sample">
<img src="HTML%20%E4%B8%AD%E5%A4%AE%E6%8F%83%E3%81%88.jpg" alt="HTML 中央揃え"   style="max-width:90%">
Welcome To My Domain
</div>
<p><strong>Welcome</strong>Users</p>

ログイン後にコピー

Output:

HTML 中央揃え

The above three examples will show each different concept and usage of the

tags in HTML first example will use the basic HTML code for the text displayed in the centered position; in the second and third examples, we use the

to align the contents in the centered position, the last example we use additionally in the HTML 中央揃え

tag for loading and displaying the images in the web pages with the centered positions not only we use images, videos, and some GUI animations for adding the contents more advanced in the business prospects for the clients.