ホームページ  >  記事  >  ウェブフロントエンド  >  HTMLのcenter属性とは何ですか? HTMLテキストと画像の中央揃えについて解説(例付き)

HTMLのcenter属性とは何ですか? HTMLテキストと画像の中央揃えについて解説(例付き)

寻∝梦
寻∝梦オリジナル
2018-09-03 17:07:2210840ブラウズ

この記事では、HTML の align 属性を紹介し、また、align 属性がテキストを中央に配置する方法と、HTML の align 属性が画像を中央に配置する方法についても紹介します

1。 . まず、HTML の centering 属性について説明します:

今日は、align 属性を使用することをお勧めします。この記事では、主に align プロパティのテキストと画像の使用方法を紹介します。

次に、テキストを中央に配置するための HTML align 属性について話しましょう。完全なコードを見てみましょう:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>PHP中文网</title>
</head>
<body>
这是一段文字,没有任何的标签,看看我现在在哪
</body>
</html>

これは簡単なコードで、表示効果は図に示すとおりです:

HTMLのcenter属性とは何ですか? HTMLテキストと画像の中央揃えについて解説(例付き)

これはタグなしで実装されており、デフォルトでブラウザの左上隅に表示されます。

今度は上のテキストを中央に配置したいのですが、どうすればよいでしょうか?

はい、記事の冒頭で紹介した align 属性です。 align 属性を追加します。

それでは、コードを見てみましょう:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>PHP中文网</title>
</head>
<body>
<p align="center">这是一段文字,没有任何的标签,看看我现在在哪</p>
</body>
</html>

テキスト ラベルは元々段落 p タグによって要約されているため、ここでは p タグを使用し、center に等しい align 属性を追加します。つまり、p タグ内のすべてのテキストが中央に表示されます。エフェクトのスクリーンショットを見てみましょう:

HTMLのcenter属性とは何ですか? HTMLテキストと画像の中央揃えについて解説(例付き)

すべてブラウザの中央に表示されます。

これは、HTML の align 属性を使用してテキストを中央揃えにする方法です。 (さらに詳しく知りたい場合は、PHP 中国語 Web サイトの

HTML オンライン ビデオ チュートリアルをご覧ください)

次に、align 属性を使用して画像を中央に配置する方法を見てみましょう:

画像タグが HTMLのcenter属性とは何ですか? HTMLテキストと画像の中央揃えについて解説(例付き) を使用していることを示します。この単一ラベルが表示されるため、表示されるコードは次のようになります:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>PHP中文网</title>
</head>
<body>
<p align="center">这是一段文字,没有任何的标签,看看我现在在哪</p>
<img  src="https://img.php.cn/upload/article/000/000/003/5b49b1f76ccb9475.jpg" alt="HTMLのcenter属性とは何ですか? HTMLテキストと画像の中央揃えについて解説(例付き)" >
</body>
</html>

上記のコードにネットワーク イメージを追加し、その効果を見てみましょう:

HTMLのcenter属性とは何ですか? HTMLテキストと画像の中央揃えについて解説(例付き)

明らかに、この画像は、ブラウザのデフォルトの左上隅に表示されます。では、img タグに align 属性を追加してみましょう。

<body>
<p align="center">这是一段文字,没有任何的标签,看看我现在在哪</p>
<img  src="https://img.php.cn/upload/article/000/000/003/5b49b1f76ccb9475.jpg" align="middle" alt="HTMLのcenter属性とは何ですか? HTMLテキストと画像の中央揃えについて解説(例付き)" >
</body>

上記で align 属性を追加しました。もちろん、これは html4.01 でのみ使用できます。なのでここでは写真は載せません。誰もが理解できる範囲で。

この記事の HTML の align 属性の紹介はここで終わります。ご質問がある場合は、以下にメッセージを残してください。

【編集者のおすすめ】

HTMLのtbodyタグはブロックレベルの要素ですか? HTMLのtbodyタグの基本的な使い方

HTMLに画像を追加するコードとは? HTMLに画像パスを正しく追加するにはどうすればよいですか?

以上がHTMLのcenter属性とは何ですか? HTMLテキストと画像の中央揃えについて解説(例付き)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。