HTMLのcenter属性とは何ですか? HTMLテキストと画像の中央揃えについて解説（例付き）-htmlチュートリアル-php.cn

ホームページ

ウェブフロントエンド

htmlチュートリアル

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

寻∝梦

Sep 03, 2018 pm 05:07 PM

align html img p

この記事では、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="/static/imghw/default1.png"  data-src="https://img.php.cn/upload/article/000/000/003/5b49b1f76ccb9475.jpg"  class="lazy"   alt="HTMLのcenter属性とは何ですか? HTMLテキストと画像の中央揃えについて解説（例付き）" >
</body>
</html>

ログイン後にコピー

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

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

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

<body>
<p align="center">这是一段文字，没有任何的标签，看看我现在在哪</p>
<img  src="/static/imghw/default1.png"  data-src="https://img.php.cn/upload/article/000/000/003/5b49b1f76ccb9475.jpg"  class="lazy"   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 までご連絡ください。