So erzielen Sie einen Zentrierungseffekt in HTML-Webseiten (Code-Sharing)

Im vorherigen Artikel „Es lohnt sich, die Grundstruktur von HTML-Webseiten während des Studiums zu verstehen (Zusammenfassung)“ habe ich Ihnen eine sehr klare Grundstruktur von HTML vorgestellt. Damit garantiere ich, dass Sie nicht verwirrt werden. Im nächsten Artikel erfahren Sie, wie Sie den Zentrierungseffekt in HTML-Webseiten erzielen. Freunde in Not können sich darauf beziehen.

HTML-zentrierte Elemente können als [inline] – [block] – [inline block] klassifiziert werden.

Häufig verwendete Blockelemente: <div> <h1> ....<h6> <dl> <table> <form> <a> <br> Häufig verwendete Inline-Blockelemente: <code><img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/image/551/855/470/1628698039773572.jpg?x-oss-process=image/resize,p_40" class="lazy" alt="So erzielen Sie einen Zentrierungseffekt in HTML-Webseiten (Code-Sharing)" > <input><div> <p> </p> <h1>.....<h6> <ol> </ol> <ul> <dl> <table> <address> <blockquote> <form> <p>常用的行内元素：<code><a> <span> <br> <i> <em> <strong> <label> <q> <cite> <code> <var></var>

常用的行内块状元素：<img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/image/551/855/470/1628698039773572.jpg?x-oss-process=image/resize,p_40" class="lazy" alt="So erzielen Sie einen Zentrierungseffekt in HTML-Webseiten (Code-Sharing)" > <input>

块级元素指定：使用text-align：center就无效了。

如果需要设置居中，通过设置左右两边的margin值为“auto”来实现。

所以左右两边元素剩余区域各自均分，也就是元素两侧的区域各占50%，那么元素就左右居中了。

宽度不固定的块级元素

通常有三种方式来实现居中

1、通过table元素来实现；

2、设置 display: inline方法，将显示类型设为行内元素；

3、设置position:relative利用相对定位的方式，将元素向左偏移 50%来实现居中。

<h1></h1>标签让标题居中

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

代码效果

img图片居中的方法

一般来说可以用CSS中的“text-align:center属性，margin:0 auto

Elementspezifikation auf Blockebene: Die Verwendung von text-align: center ist ungültig.

Wenn Sie die Mitte festlegen müssen, stellen Sie den Randwert auf der linken und rechten Seite auf „auto“ ein.

So werden die restlichen Flächen der Elemente auf der linken und rechten Seite gleichmäßig aufgeteilt, d.h. die Flächen auf beiden Seiten des Elements machen jeweils 50 % aus, dann ist das Element links und rechts zentriert. Elemente auf Blockebene mit variabler Breite

Es gibt normalerweise drei Möglichkeiten, die Zentrierung zu erreichen:

2 code>-Methode, stellen Sie den Anzeigetyp auf Inline-Elemente ein;

3. Stellen Sie position:relative ein, um die relative Positionierung zu verwenden, um das Element um 50 % nach links zu versetzen, um eine Zentrierung zu erreichen.

<h1></h1>-Tag zentriert den Titel

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

Codeeffekt

Img-Bildzentrierungsmethode🎜🎜🎜 Im Allgemeinen ist es in Ordnung CSS-Code> text-align:center-Attribut, margin:0 auto oder Positionierungsattribut“ können zentriert werden. 🎜🎜img definiert ein übergeordnetes Tag, um den Inhalt in diesem übergeordneten Tag zu zentrieren. Dann wird das IMG natürlich zentriert das zu zentrierende Div. Methode 🎜🎜

style="text-align:center; "

🎜🎜 Codebeispiel, wie man einen Zentrierungseffekt in einer HTML-Webseite erzielt🎜🎜🎜

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

🎜🎜Code-Renderings🎜🎜🎜🎜🎜🎜Wenn Sie einfach die HTML-Sprache verwenden möchten, ist die Auswahl Wenn Sie sich mit Webdesign beschäftigen, wird empfohlen, die CSS-Sprache zum Ändern von Webseiten zu verwenden. 🎜🎜Empfohlenes Lernen: 🎜Html-Video-Tutorial🎜🎜