So legen Sie die Ausrichtung in CSS fest-CSS-Tutorial-php.cn

So legen Sie die Ausrichtung in CSS fest

醉折花枝作酒筹

Freigeben： 2023-01-05 16:10:10

Original

7414 Leute haben es durchsucht

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.

So legen Sie die Ausrichtung in CSS 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>

Nach dem Login kopieren

So legen Sie die Ausrichtung in CSS fest

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 (

in unserem Fall) auf eine bestimmte Breite eingestellt ist und die !DOCTYPE-Deklaration weggelassen wird, fügen IE8 und früher 17 Pixel Rand rechts hinzu. Zum Beispiel:

<!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>

Nach dem Login kopieren

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>

Nach dem Login kopieren

Empfohlenes Lernen: So legen Sie die Ausrichtung in CSS fest 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!