ホームページ > 記事 > ウェブフロントエンド > HTML Web ページでセンタリング効果を実現する方法 (コード共有)

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

奋力向前オリジナル: 2021-08-11 17:34:57101651ブラウズ

前回の記事「勉強中に知っておくと損はないHTML Webページの基本構造（まとめ）」では、非常にわかりやすいhtmlの基本構造を紹介しました。これなら、あなたが支離滅裂にならないことを保証します。次の記事では、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="487.jpg" / 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="5454.jpg"   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="HTML Web ページでセンタリング効果を実現する方法 (コード共有)"   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="79.jpg"   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="89.jpg"   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="877.jpg"   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 Web ページの基本構造を理解しながら学習するとよいでしょう（概要）次の記事：HTML Web ページの基本構造を理解しながら学習するとよいでしょう（概要）

続きを見る

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

....

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

関連記事

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