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 までご連絡ください。

Web開発にとってHTML属性が重要なのはなぜですか？May 12, 2025 am 12:01 AM

htmlattributesarecrucialinwebdevevermentmentmentmentmentmentmentmention behavior、like、andfunctionality.theyenhance -interactivity、accessibility、andseo.forexample、thesrcattribute intagsimpactsseo

Alt属性の目的は何ですか？なぜそれが重要なのですか？May 11, 2025 am 12:01 AM

ALT属性は、HTMLのタグの重要な部分であり、画像の代替テキストを提供するために使用されます。 1.画像をロードできない場合、ALT属性のテキストが表示され、ユーザーエクスペリエンスが向上します。 2。スクリーンリーダーは、ALT属性を使用して、視覚障害のあるユーザーが写真の内容を理解するのに役立ちます。 3. ALT属性のEnginesインデックステキストを検索して、WebページのSEOランキングを改善します。

HTML、CSS、およびJavaScript：例と実用的なアプリケーションMay 09, 2025 am 12:01 AM

Web開発におけるHTML、CSS、およびJavaScriptの役割は次のとおりです。1。HTMLは、Webページ構造の構築に使用されます。 2。CSSは、Webページの外観を美化するために使用されます。 3. JavaScriptは、動的な相互作用を実現するために使用されます。タグ、スタイル、スクリプトを通じて、これら3つは最新のWebページのコア関数を構築します。

Lang属性をタグにどのように設定しますか？なぜこれが重要なのですか？May 08, 2025 am 12:03 AM

タグのLang属性を設定することは、WebアクセシビリティとSEOを最適化する重要なステップです。 1）ラング属性をタグに設定します。 2）多言語コンテンツでは、ようなさまざまな言語パーツのLang属性を設定します。 3）「EN」、「FR」、「ZH」などのISO639-1標準に準拠する言語コードを使用します。Lang属性を正しく設定すると、Webページと検索エンジンランキングのアクセシビリティが向上します。

HTML属性の目的は何ですか？May 07, 2025 am 12:01 AM

htmlattributeSareSientionalentionalentionalentionalentiallyance'functionalityandappearance.theyaddinformationtodefinebehavior、light、and interaction、makewebsitesteractive、responsive、andviseallyappaleal.attributeslikesrc、href、class、型、およびdoadabledransform

HTMLでリストを作成するにはどうすればよいですか？May 06, 2025 am 12:01 AM

toreatealistinhtml、useforunorderedlistsandfororderedlists：1）forunorderedlists、wrapitemsinanduseforeachitem、renderingasabulletedlist.2）

HTMLアクション：Webサイト構造の例May 05, 2025 am 12:03 AM

HTMLは、明確な構造のWebサイトを構築するために使用されます。 1）Webサイト構造などのタグを使用し、定義します。 2）例は、ブログとeコマースのウェブサイトの構造を示しています。 3）誤ったラベルネスティングなどの一般的な間違いを避けてください。 4）HTTP要求を削減し、セマンティックタグを使用してパフォーマンスを最適化します。

HTMLページに画像を挿入するにはどうすればよいですか？May 04, 2025 am 12:02 AM

to inertanimageintoanhtmlpage、usethetagwithsrcandaltattributes.1）usealttextforaccessibilityandseo.2）emplencesrcsetForresponsiveimages.3）applylazyloadingwithloading = "lazy" tooptimizeperformance.4）

See all articles