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

奋力向前

リリース： 2021-08-12 00:13:28

オリジナル

101614 人が閲覧しました

前回の記事「勉強中に知っておくと損はない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="max-width:90%"

ログイン後にコピー

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

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

ログイン後にコピー

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