Heim >Web-Frontend >HTML-Tutorial >Einführung in die Methode zum Festlegen des Zentrums in HTML (Code)
Einführung in die Methode zum Festlegen des Zentrums in HTML (Code)
- 不言Original
- 2018-09-01 10:49:3212215Durchsuche
Der Inhalt dieses Artikels befasst sich mit der Einführung (Code) der Zentrierungseinstellungsmethode. Ich hoffe, dass er für Freunde hilfreich ist.
Horizontale Zentrierung
Während des eigentlichen Entwicklungsprozesses werden wir auf viele Situationen stoßen, in denen Elemente horizontal zentriert werden müssen, wie z. B. Artikeltitel, usw. Zu den üblichen horizontalen Zentrierungssituationen gehören hier Inline-Elemente und Elemente auf Blockebene, die weiter in Elemente auf Blockebene mit fester Breite und Elemente auf Blockebene mit variabler Breite unterteilt werden. Elemente auf Blockebene mit fester Breite bedeuten, wie der Name schon sagt, dass die Breite von Elementen auf Blockebene ein fester Wert ist. Bei Elementen auf Blockebene mit variabler Breite wissen wir, dass dies bei Elementen auf Blockebene nicht der Fall ist ein fester Wert.
Inline-Elemente
Wenn das festgelegte Element ein Inline-Element wie Text oder Bild ist, tun wir dies, indem wir text-align:center auf dem übergeordneten Element festlegen.
<body>
<div class="textCenter">这是一个在父元素中居中元素</div>
</body>
<style>
textCenter{
text-align:center;
}
</style>Aus dem obigen Code können wir ersehen, dass „Dies ein zentriertes Element im übergeordneten Element dieses Textes ist“. Der Text wird in der Mitte angezeigt. Diese Methode ist jedoch nicht anwendbar, wenn das festzulegende Element ein Element auf Blockebene ist. Elemente auf Blockebene werden in zwei Typen unterteilt: Elemente auf Blockebene mit fester Breite und Elemente auf Blockebene mit variabler Breite.
Blockebenenelement mit fester Breite
Wenn die beiden Bedingungen des Blockebenenelements mit fester Breite „feste Breite“ und „Blockebenenelement“ erfüllt sind , können Sie die Werte für den linken und rechten Rand festlegen. Auf „Automatisch“ wird eine Zentrierung erreicht.
<body>
<div>水平居中的定宽块级元素</div>
</body>
<style>
div{
border:1px solid blue;
width:100px; /*宽度设置固定值*/
margin:10px auto;
}
</style>
/*或者也可以写成 margin-left:auto;
margin-right:auto;*/
/* 元素的上下margin属性可以照常设置，不受影响 */Elemente auf Blockebene mit unbestimmter Breite
Es gibt drei Methoden zum Zentrieren von Elementen auf Blockebene mit unregelmäßiger Breite: Die erste besteht darin, ein Tabellen-Tag hinzuzufügen Zweitens wird die Anzeige festgelegt: Die Inline-Methode ähnelt der ersten Methode. Der Anzeigetyp wird auf Inline-Elemente festgelegt und die Attribute der Elemente mit variabler Breite werden festgelegt. Die dritte Methode besteht darin, position:relative und left:50 festzulegen %, und verwenden Sie die relative Positionierung, um das Element um 50 % nach links zu verschieben, um eine Zentrierung zu erreichen.
Fügen Sie das Tabellen-Tag hinzu
Fügen Sie das Tabellen-Tag hinzu, um die Längenanpassungsfähigkeit des Tabellen-Tags zu nutzen (seine Länge ist nicht definiert und die Länge des übergeordneten Elements). Der Körper ist nicht standardmäßig festgelegt. Die Tabellenlänge wird anhand der Länge des inneren Textes bestimmt. Sie kann als Element auf Blockebene mit fester Breite betrachtet werden und dann die Randmethode des Elements auf Blockebene mit fester Breite verwenden zentrieren Sie es horizontal.
Der erste Schritt besteht darin, ein Tabellen-Tag außerhalb des Elements hinzuzufügen, das zentriert werden muss, und dann den „linken und rechten Rand, der zentriert werden soll“ für die Tabelle festzulegen
<div>
<table>
<tbody>
<tr><td>
<ul>
<li>锄禾日当午</li>
<li>汗滴禾下土</li>
<li>谁知盘中餐</li>
<li>粒粒皆辛苦</li>
</ul>
</td></tr>
</tbody>
</table>
</div>
<style>
table{
border:1px solid;
margin:0 auto;
}
</style>Legen Sie die Methode display:inline fest
Ändern Sie die Anzeige von Elementen auf Blockebene in Inline-Typ, stellen Sie sie so ein, dass Inline-Elemente angezeigt werden, und verwenden Sie dann text-align:center, um eine zentrierte Anzeige zu erreichen. Der Vorteil dieser Methode gegenüber der Tabellenmethode besteht darin, dass keine nichtsemantischen Tags hinzugefügt werden müssen. Diese Methode weist jedoch auch bestimmte Probleme auf, dh sie ändert die Anzeige von Blockelementen in Inline und es werden weniger Elemente angezeigt wenn sie zu Inline-Elementen werden.
<body>
<div class="container">
<ul>
<li><a href="#">First</a></li>
<li><a href="#">Second</a></li>
<li><a href="#">Third</a></li>
</ul>
</div>
</body>
<style>
.container{
text_align:center;
}
.container ul{
list-style:none;
margin:0;
padding:0;
display:inline;
}
.container li{
margin-right:10px;
display:inline;
}
</style>Stellen Sie position:relative und left:50% ein
Durch Festlegen von float auf das übergeordnete Element und anschließendes Festlegen von position:relative und left:50% wird das untergeordnete Element festgelegt Das Element legt position :relative und left:50% fest, um eine horizontale Zentrierung zu erreichen.
<body>
<div class="container">
<ul>
<li><a href=""#>First</a></li>
<li><a href=""#>Second</a></li>
<li><a href=""#>Third</a></li>
<li><a href=""#>Fourth</a></li>
</ul>
</div>
</body>
<style>
.container{
float:left;
position:relative;
left:50%;
}
.container ul{
list-style:none;
margin:0;
padding:0;
position:relative;
left:-50%
}
.container li{
float:left;
display:inline;
margin-right:8px
}
</style>Vertikale Zentrierung
Die vertikale Zentrierung wird in zwei Situationen unterteilt: einzeiliger Text mit einer bestimmten Höhe des übergeordneten Elements und mehrzeiliger Text mit einer bestimmten Höhe des übergeordneten Elements.
Eine einzelne Textzeile, deren Höhe durch das übergeordnete Element bestimmt wird
Die Methode zum vertikalen Zentrieren einer einzelnen Textzeile, deren Höhe durch das übergeordnete Element bestimmt wird, ist um die Höhe und Zeilenhöhe des übergeordneten Elements so festzulegen, dass sie konsistent sind. height ist die Höhe des Elements, line-height ist die Zeilenhöhe, also der Zeilenabstand, also der Abstand zwischen den Grundlinien zwischen den Zeilen. Der berechnete Unterschied zwischen Zeilenhöhe und Schriftgröße wird in zwei Hälften geteilt (in CSS „Zeilenabstand“ genannt) und am oberen und unteren Rand einer Textzeile hinzugefügt. Die kleinste Box, die diesen Inhalt enthalten kann, ist eine Zeilenbox. Diese Art der Textzeilen- und Blockhöhe bringt einen Nachteil mit sich, das heißt, wenn die Länge des Textinhalts größer als die Breite des Blocks ist, löst sich ein Teil des Inhalts vom Block.
<div class="container">
hello,world!
</div>
<style>
.container{
height:10px;
line-height:10px;
}
</style>Mehrzeiliger Text mit einer bestimmten Höhe des übergeordneten Elements
Es gibt zwei Möglichkeiten, mehrzeiligen Text, Bilder usw. mit einer bestimmten Höhe vertikal zu zentrieren Die erste besteht darin, das Tabellen-Tag einzufügen und „vertikal-align:middle“ festzulegen. Es gibt in CSS ein Attribut „vertikal-align“ für die vertikale Zentrierung. Wenn das übergeordnete Element diesen Stil festlegt, ist es für alle untergeordneten Elemente vom Inline-Block-Typ nützlich.
/* 方式一 */
<body>
<table><tbody><tr><td class="wrap">
<div>
<p>居中一下</p>
</div>
</td></tr></tbody></table>
</body>
<style>
table td{
height:500px;
background:#ccc;
}
</style>
/* 方式二 */
<div class="container">
<div>
<p>居中一下下</p>
<p>居中一下下</p>
<p>居中一下下</p>
<p>居中一下下</p>
<p>居中一下下</p>
</div>
</div>
<style>
.container{
height:300px;
background:#ccc;
display:table-cell;/*IE8以上及Chrome、Firefox*/
vertical-align:middle;/*IE8以上及Chrome、Firefox*/
}
</style>In Browsern wie Chrome, Firefox und IE8 oder höher können Sie die Anzeige von Elementen auf Blockebene auf Tabellenzelle einstellen und das Vertical-Align-Attribut aktivieren. Beachten Sie jedoch, dass IE6 und 7 dies nicht unterstützen dieser Stil.
Unsichtbare Änderung des Anzeigetyps
Wenn wir während unseres Entwicklungsprozesses das Attribut position:absolute oder float:left für ein Element festlegen, ändert sich der Anzeigetyp des Elements automatisch in display:inline_block (Element auf Blockebene) können Sie die Breite und Höhe des Elements festlegen.
<div class="container">
<a href="#" title="">点这里看看</a>
</div>
<style>
.container a{
position；absolute;
width:200px;
background:#ccc;
}
</style>Verwandte Empfehlungen:
Der Unterschied zwischen CSS-HTML-Elementzentrierung und HTML-Elementinhaltszentrierung
HTML-Elemente sind horizontal und vertikal So legen Sie die Mitte fest
Das obige ist der detaillierte Inhalt vonEinführung in die Methode zum Festlegen des Zentrums in HTML (Code). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!