Heim >Web-Frontend >CSS-Tutorial >So legen Sie die Ausrichtung in CSS fest
So legen Sie die Ausrichtung in CSS fest
- 醉折花枝作酒筹Original
- 2021-04-20 17:22:537471Durchsuche
Einstellungsmethode: 1. Verwenden Sie die Anweisung „margin:0px auto“, um die horizontale Ausrichtung festzulegen. 2. Verwenden Sie das Positionsattribut und die Attribute „oben“, „unten“, „links“ und „rechts“, um die linke oder rechte Ausrichtung festzulegen. float:right|left“-Anweisung legt die linke oder rechte Ausrichtung fest.
Die Betriebsumgebung dieses Tutorials: Windows7-System, CSS3- und HTML5-Version, Dell G3-Computer.
1. Verwenden Sie das Randattribut, um Elemente horizontal auszurichten.
Sie können Elemente ausrichten, indem Sie den linken und rechten Rand auf „Auto“ setzen. Aber die Voraussetzung ist, dass es gesagt werden muss! DOCTYPE, andernfalls ist es in IE8 ungültig. Dadurch wird das Element zentriert, zum Beispiel:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>document</title>
<style>
div{
margin: 0px auto;
width: 70%;
height: 300px;
background-color: red;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
Tipp: Wenn die Breite 100 % beträgt, hat die Ausrichtung keine Auswirkung.
2. Verwenden Sie das Positionsattribut für die Links- und Rechtsausrichtung. Die Verwendung dieser Methode ist zweifellos die beste Methode in Bezug auf die Kompatibilität. Wenn Sie jedoch das Positionsattribut verwenden, legen Sie bitte immer die !DOCTYPE-Anweisung fest. In IE8 und früheren Versionen gibt es eine Problem mit der Version. Wenn das Containerelement (
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>document</title>
<style>
body{
margin: 0;
padding: 0;
}
.container{
position: relative;
width: 100%;
}
.right{
position: absolute;
right: 0px;
width: 300px;
height: 50px;
background-color: red;
}
</style>
</head>
<body>
<div class="container">
<div class="right"></div>
</div>
</body>
</html>3. Verwenden Sie das Float-Attribut für die linke und rechte Ausrichtung. Bei der Verwendung des Float-Attributs gibt es in IE8 und früheren Versionen ein Problem. Wenn die !DOCTYPE-Deklaration weggelassen wird, fügen IE8 und früher rechts 17 Pixel Rand hinzu. Dies scheint der für die Bildlaufleiste reservierte Platz zu sein. Wenn Sie das Float-Attribut verwenden, legen Sie immer die !DOCTYPE-Deklaration fest: Zum Beispiel:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>document</title>
<style>
body{
margin: 0;
padding: 0;
}
.right{
float: right;
width: 300px;
height: 50px;
background-color: red;
}
</style>
</head>
<body>
<div class="container">
<div class="right"></div>
</div>
</body>
</html>
Empfohlenes Lernen: 
CSS-Video-Tutorial
Das obige ist der detaillierte Inhalt vonSo legen Sie die Ausrichtung in CSS fest. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!