Heim > Artikel > Web-Frontend > So legen Sie die horizontale Zentrierung in CSS fest
So legen Sie die horizontale Zentrierung in CSS fest
- 青灯夜游Original
- 2021-04-02 16:25:115827Durchsuche
So legen Sie die horizontale Zentrierung in CSS fest: 1. Verwenden Sie den Stil „text-align: center;“, um Inline-Elemente in Blockebenenelementen (übergeordneten Elementen) horizontal zu zentrieren , kann ein Blockebenenelement mit einer festen Breite innerhalb eines Blockebenenelements (übergeordnetes Element) horizontal zentrieren.
Die Betriebsumgebung dieses Tutorials: Windows7-System, CSS3- und HTML5-Version, Dell G3-Computer.
Methode 1: Verwenden Sie das text-align-Attribut
, um den Stil text-align: center; direkt auf das übergeordnete Element festzulegen, um die Inline-Elemente im Element auf Blockebene horizontal zu zentrieren ( übergeordnetes Element) text-align: center;样式，可以将块级元素（父元素）中的行内元素进行水平居中
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
#father {
width: 300px;
height: 100px;
background: palevioletred;
text-align: center;
}
</style>
<div id="father">
我是测试文本！
</div>
</html>效果图：
说明：
该种方法仅对文字、图片、按钮等行内元素有效（display属性设置为inline或inline-block的）进行水平居中
（学习视频分享：css视频教程）
方法2：使用margin属性
给需要居中的子元素设置margin: 0 auto;
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
#father {
width: 300px;
height: 100px;
background-color: palevioletred;
}
#son {
width: 100px;
height: 50px;
background-color: pink;
margin: 0 auto;
}
</style>
<div id="father">
<div id="son">我是块级元素</div>
</div>
</html>Rendering: 
Hinweis:
Diese Methode ist nur für Inline-Elemente wie Text, Bilder, Schaltflächen gültig (das Attribut display ist auf inline gesetzt oder). inline -block) für die horizontale Zentrierung
(Teilen von Lernvideos: CSS-Video-Tutorial
)Methode 2: Verwenden Sie das Margin-Attribut
🎜🎜, um denmargin: 0 auto;-Stil für das untergeordnete Element festzulegen, das zentriert werden muss. Sie können den Block mit festlegen eine feste Breite im Blockebenenelement (übergeordnetes Element). Ebenenelemente sind horizontal zentriert. 🎜rrreee🎜Rendering: 🎜🎜🎜🎜🎜🎜Beschreibung: 🎜🎜🎜Diese Methode kann nur horizontal zentriert werden und ist für die Positionierung schwebender Elemente ungültig. 🎜🎜Weitere Kenntnisse zum Thema Programmierung finden Sie unter: 🎜Programmiervideos🎜! ! 🎜Das obige ist der detaillierte Inhalt vonSo legen Sie die horizontale Zentrierung in CSS fest. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!