ホームページ > 記事 > ウェブフロントエンド > HTML コード内でテキストと画像を中央に配置するにはどうすればよいですか?

HTML コード内でテキストと画像を中央に配置するにはどうすればよいですか?

黄舟オリジナル: 2017-05-26 15:40:1111739ブラウズ

HTML コード、テキスト/画像を中央に配置するにはどうすればよいですか?これは、W3Cschool のプログラミング Q&A でフロントエンド Leier によって提起された質問です。ネットユーザーの寄付者である Tong Xifu さんが詳細な回答をしてくれました。

HTML テキストのセンタリングと HTML 画像のセンタリングのメソッドコード。HTML でテキストのセンタリングと画像のセンタリングを実現することで、HTML でテキストと画像のコンテンツのセンタリングを実現する方法が 3 つあります。そのうちの 2 つは CSS スタイルを使用して実装され、常に HTML 内に追加されます。元の HTML タグ「align="center"」（中央揃え）の実装。

1. CSS の中央揃えスタイルを本文に追加します: text-align:center

1. 中央揃えのサンプルのスクリーンショット

HTML コード内でテキストと画像を中央に配置するにはどうすればよいですか?

本文のセンタリングを設定して、テキストまたは画像のスクリーンショットが中央に配置されるようにします

2. CSS センタリングスタイルを外側のテキストオブジェクトに追加します

まず、CSS 名セレクターは「.w3cschool」です。セレクタにセンタリングスタイルを追加します。この例では、テキスト用と画像用の 2 つの DIV オブジェクトを示しています。

1. 対応する CSS コードは次のとおりです:

<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> 
  <head> 
    <meta charset="gb2312" /> 
    <title>W3Cschool居中实例</title> 
    <style> 
      body{text-align:center} 
    </style> 
  </head> 
  <body> 
    W3Cschool会被居中 
  </body>
</html>

2. 完全な HTML+DIV+CSS コードは次のとおりです:

.w3cschool{text-align:center}

3. オブジェクト内の画像とテキストの中央揃え効果を実現する CSS のスクリーンショット

HTMLテキストの中央揃えを実現するには HTML画像の中央揃えの例

HTML コード内でテキストと画像を中央に配置するにはどうすればよいですか? HTMLテキストの中央揃えを実現する - HTML画像の中央揃えの例のスクリーンショット

3番目に、テキストの外側のオブジェクトにalign="center"を追加します

このメソッド以前はより一般的な方法でしたが、HTML タグ「center」で直接 align= を使用すると、オブジェクト内の画像またはテキストのコンテンツを中央に配置できます。この例では、HTML テーブルの中央揃えと一般的な HTML タグのコンテンツの中央揃えを示します。

1. 完全な HTML ソースコード:

<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> 
  <head> 
    <meta charset="gb2312" /> 
    <title>W3Cschool居中实例</title> 
    <style> 
      .w3cschool{text-align:center} 
    </style> 
  </head> 
  <body> 
    <div class="w3cschool">W3Cschool会被居中</div> 
    <div class="w3cschool">
      ![](http://upload-images.jianshu.io/upload_images/2642238-eba477a8a75edf90.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)    </div> 
  </body>
</html>

2. サンプル効果のスクリーンショット

スクリーンショットを作成するための HTML テキストの中央揃え

HTML コード内でテキストと画像を中央に配置するにはどうすればよいですか? スクリーンショットを作成するための HTML テーブルのテキストの中央揃え

で align 属性を直接使用します。オブジェクト内のコンテンツを中央に配置するには、通常の HTML タグおよび HTML テーブルタグで「align="center"」中央揃えコードを使用すると便利です。

以上がHTML コード内でテキストと画像を中央に配置するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明：

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

前の記事：HTMLはこんな風には書けません、あなたが作ったのですか？次の記事：HTMLはこんな風には書けません、あなたが作ったのですか？

関連記事

続きを見る