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

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

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

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

....

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


<var><code>

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



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

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

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

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

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

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

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

1.

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

2.

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

3.

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

##

タイトルを中央に配置するタグ

<p align="center">关关和鸣的雎鸠，栖息在河中的小洲</p>

コード効果




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

通常、「

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

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

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


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

  style="max-width:90%"

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

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

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

 

 

 
 


                

                php搜一下
            







   图片链接







    图片链接







    图片链接







    图片链接







    图片链接


コード レンダリング

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

Web デザインに携わっている場合は、CSS 言語を使用して Web ページを変更することをお勧めします。 推奨学習:

HTML ビデオ チュートリアル

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