HTML Web ページでセンタリング効果を実現する方法 (コード共有)

Aug 11, 2021 pm 05:34 PM

html

前回の記事「勉強中に知っておくと損はないHTML Webページの基本構造（まとめ）」では、非常にわかりやすいhtmlの基本構造を紹介しました。これなら、あなたが支離滅裂にならないことを保証します。次の記事では、HTML Web ページでセンタリング効果を実現する方法を説明します。必要な友人は参照してください。

HTML Web ページでセンタリング効果を実現する方法 (コード共有)

#html 中央揃えの要素は [インライン] - [ブロック] - [インラインブロック] に分類できます

一般的に使用されたブロック要素:

....

一般的に使用されるインライン要素:

<var><code>

一般的に使用されるインラインブロック要素:

HTML Web ページでセンタリング効果を実現する方法 (コード共有)

ブロックレベルの要素指定:

text-align: center の使用は無効です。

中央を設定する必要がある場合は、左右のマージン値を「

auto」に設定してください。

したがって、左側と右側の要素の残りの領域が均等に分割されます。つまり、要素の両側の領域がそれぞれ 50% を占め、要素は左右の中央に配置されます。。

可変幅のブロックレベル要素

センタリングを実現するには、通常 3 つの方法があります

table を使用する要素の実装;

display: inline メソッドを設定して表示タイプをインライン要素に設定します;

position:relativeUse を設定します相対位置決め方法では、要素を左に 50% オフセットしてセンタリングを実現します。

タイトルを中央に配置するタグ
<p align="center">关关和鸣的雎鸠，栖息在河中的小洲</p>
コード効果

img 画像を中央に配置する方法

通常、「

text-align:center#」を使用できます。 CSS ## 属性、

margin:0 auto または配置属性」を中央揃えにすることができます。 img は、この親タグのコンテンツが中央に配置されるように親タグを定義します。そうすれば、img も自然に中央に配置されます

<p align="center">img……</p>

入力入力ボックスを中央に配置する方法

style="text-align:center; "

入力が div の外側にネストされており、div の内部要素を中央に設定する方法

<div align="center">
<input value="帐号"size="20">
</div>

コード例HTML Web ページでセンタリング効果を実現するには

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8" />

<title>网页制作</title>

<style>

*{padding: 0;margin: 0;}

.news{width: 1080px;height: 200px;margin: 0 auto;}

.left_1{width: 200px;height: 150px;float: left;padding: 10px;}

.left_2{width: 200px;height: 150px;float: left;margin-top: 10px;}

.center{width: 200px;height: 150px;float: left;padding: 10px;}

.right_1{width: 200px;height: 150px;float: left;margin-top: 10px;}

.right_2{width: 200px;height: 150px;float: left;padding: 10px;}

a{ display: block; text-align: center;}

a:hover{color:#00FF00;text-decoration: underline;}
input.text{text-align:center;padding:10px 20px;width:300px;}

</style>

</head>

<body>
<style  type="text/css">
.mydiv{
	width:100%;
	height:500px;
	
	text-align:center;
 }
 </style>
 <div style="width:960px; margin:0 auto; height:auto:">
 <p style="text-align:center;"><img  src="/static/imghwm/default1.png"  data-src="487.jpg"  class="lazy"   / alt="HTML Web ページでセンタリング効果を実現する方法 (コード共有)" ></p>
 </div>
 <div class="mydiv">
<div class="reserch">
                <div input style="text-align:center;"><input type="text";></div>
                <button style="height:22px;width: 80px;text-align:center;">php搜一下</button>
            </div>

<div class="news">

<div class="left_1">

<a href="http://www.php.cn/" target="_blank"><img  src="/static/imghwm/default1.png"  data-src="5454.jpg"  class="lazy"     style="max-width:90%"  style="max-width:90%" / alt="HTML Web ページでセンタリング効果を実現する方法 (コード共有)" ></a>

   <a href="http://www.php.cn/" target="_blank">图片链接</a>

</div>

<div class="left_2">

<a href="http://www.php.cn/" target="_blank"><img  src="/static/imghwm/default1.png"  data-src="79.jpg"  class="lazy"     style="max-width:90%"  style="max-width:90%" / alt="HTML Web ページでセンタリング効果を実現する方法 (コード共有)" ></a>

    <a href="http://www.php.cn/" target="_blank">图片链接</a>

</div>

<div class="center">

<a href="http://www.php.cn/" target="_blank"><img  src="/static/imghwm/default1.png"  data-src="79.jpg"  class="lazy"     style="max-width:90%"  style="max-width:90%" / alt="HTML Web ページでセンタリング効果を実現する方法 (コード共有)" ></a>

    <a href="http://www.php.cn/" target="_blank">图片链接</a>

</div>

<div class="right_1">

<a href="http://www.php.cn/" target="_blank"><img  src="/static/imghwm/default1.png"  data-src="89.jpg"  class="lazy"     style="max-width:90%"  style="max-width:90%" / alt="HTML Web ページでセンタリング効果を実現する方法 (コード共有)" ></a>

    <a href="http://www.php.cn/" target="_blank">图片链接</a>

</div>

<div class="right_2">

<a href="http://www.php.cn/" target="_blank"><img  src="/static/imghwm/default1.png"  data-src="877.jpg"  class="lazy"     style="max-width:90%"  style="max-width:90%" / alt="HTML Web ページでセンタリング効果を実現する方法 (コード共有)" ></a>

    <a href="http://www.php.cn/" target="_blank">图片链接</a>

</div>

</div>

</body>

</html>

コードレンダリング

単純にやりたい場合は、 HTML 言語を使用します。選択は

Web デザインに携わっている場合は、CSS 言語を使用して Web ページを変更することをお勧めします。 HTML Web ページでセンタリング効果を実現する方法 (コード共有)

推奨学習:

HTML ビデオチュートリアル

以上がHTML Web ページでセンタリング効果を実現する方法 (コード共有)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明

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

テキストからウェブサイトへ：HTMLの力Apr 13, 2025 am 12:07 AM

HTMLは、Webページを構築するために使用される言語であり、タグと属性を使用してWebページの構造とコンテンツを定義します。 1）htmlは、などのタグを介してドキュメント構造を整理します。 2）ブラウザはHTMLを分析してDOMを構築し、Webページをレンダリングします。 3）マルチメディア関数を強化するなど、HTML5の新機能。 4）一般的なエラーには、閉じられていないラベルと引用されていない属性値が含まれます。 5）最適化の提案には、セマンティックタグの使用とファイルサイズの削減が含まれます。

HTML、CSS、およびJavaScriptの理解：初心者向けガイドApr 12, 2025 am 12:02 AM

webdevelopmentReliesOnhtml、css、andjavascript：1）htmlStructuresContent、2）cssStylesit、および3）Javascriptaddsinteractivity、形成、

HTMLの役割：Webコンテンツの構造Apr 11, 2025 am 12:12 AM

HTMLの役割は、タグと属性を使用してWebページの構造とコンテンツを定義することです。 1。HTMLは、読みやすく理解しやすいようなタグを介してコンテンツを整理します。 2。アクセシビリティとSEOを強化するには、セマンティックタグなどを使用します。 3. HTMLコードの最適化により、Webページの読み込み速度とユーザーエクスペリエンスが向上する可能性があります。

HTMLとコード：用語を詳しく見るApr 10, 2025 am 09:28 AM

htmlisaspecifictypeofcodefocuseduructuringwebcontent

HTML、CSS、およびJavaScript：Web開発者に不可欠なツールApr 09, 2025 am 12:12 AM

HTML、CSS、およびJavaScriptは、Web開発の3つの柱です。 1。HTMLは、Webページ構造を定義し、などなどのタグを使用します。2。CSSは、色、フォントサイズなどのセレクターと属性を使用してWebページスタイルを制御します。

HTML、CSS、およびJavaScriptの役割：コアの責任Apr 08, 2025 pm 07:05 PM

HTMLはWeb構造を定義し、CSSはスタイルとレイアウトを担当し、JavaScriptは動的な相互作用を提供します。 3人はWeb開発で職務を遂行し、共同でカラフルなWebサイトを構築します。

HTMLは初心者のために簡単に学ぶことができますか？Apr 07, 2025 am 12:11 AM

HTMLは、簡単に学習しやすく、結果をすばやく見ることができるため、初心者に適しています。 1）HTMLの学習曲線はスムーズで簡単に開始できます。 2）基本タグをマスターして、Webページの作成を開始します。 3）柔軟性が高く、CSSおよびJavaScriptと組み合わせて使用できます。 4）豊富な学習リソースと最新のツールは、学習プロセスをサポートしています。

HTMLでの開始タグの例は何ですか？Apr 06, 2025 am 12:04 AM

Anexampleapalofastartingtaginhtmlis、それはaperginsaparagraph.startingtagsaresentionentientiontheyinitiateelements、definetheirtypes、およびarecrucialforurturingwebpagesandcontingthomedomを構築します。

See all articles

ホットAIツール

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

脱衣画像を無料で

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

Dreamweaver Mac版

ビジュアル Web 開発ツール

SublimeText3 Mac版

神レベルのコード編集ソフト（SublimeText3）

SublimeText3 Linux 新バージョン

SublimeText3 Linux 最新バージョン

WebStorm Mac版

便利なJavaScript開発ツール

SecLists

SecLists は、セキュリティテスターの究極の相棒です。これは、セキュリティ評価中に頻繁に使用されるさまざまな種類のリストを 1 か所にまとめたものです。 SecLists は、セキュリティテスターが必要とする可能性のあるすべてのリストを便利に提供することで、セキュリティテストをより効率的かつ生産的にするのに役立ちます。リストの種類には、ユーザー名、パスワード、URL、ファジングペイロード、機密データパターン、Web シェルなどが含まれます。テスターはこのリポジトリを新しいテストマシンにプルするだけで、必要なあらゆる種類のリストにアクセスできるようになります。