Was sind die Ausrichtungsmethoden in CSS?

Methode: 1. Verwenden Sie den Stil „text-align:center“, um eine horizontale Zentrierung zu erreichen. 2. Verwenden Sie den Stil „line-height: line height;“, um eine vertikale Zentrierung zu erreichen. 3. Verwenden Sie den Stil „align-items:center;justify-content:center“, um eine horizontale und vertikale Zentrierung zu erreichen.

Die Betriebsumgebung dieses Tutorials: Windows7-System, CSS3- und HTML5-Version, Dell G3-Computer.

Was sind die Ausrichtungsmethoden in CSS

1. Horizontale Zentrierung

• Horizontale Zentrierung von Inline-Elementen

Wenn das Element auf ein Inline-Element wie Text, Bild usw ., im übergeordneten Element Setzen Sie text-align:center, um eine horizontale Zentrierung von Inline-Elementen zu erreichen, und stellen Sie die Anzeige von untergeordneten Elementen auf „inline-block“ ein, damit untergeordnete Elemente zu Inline-Elementen werden

<div class="parent" style="background-color: gray;">
  <div class="child" style="background-color: lightblue;">DEMO</div></div>
<style>
.parent{text-align: center;}    
.child{display: inline-block;}
</style>

• Horizontale Zentrierung von Blockelementen (behoben). width)

Wenn es sich bei dem festzulegenden Element um ein Element auf Blockebene mit fester Breite handelt, funktioniert text-align: center nicht. Die Zentrierung kann erreicht werden, indem der Wert „linker und rechter Rand“ auf „Auto“ gesetzt wird.

<div class="parent" style="background-color: gray;">
  <div class="child" style="background-color: lightblue;">DEMO</div>
  </div>
  <style>
.child{
            width: 200px;
            margin: 0 auto;
        }
        </style>

• Horizontale Zentrierung von Blockelementen (unbestimmte Breite)
  

Bei der tatsächlichen Arbeit werden wir auf die Notwendigkeit stoßen, die Zentrierung für „Elemente auf Blockebene mit variabler Breite“ festzulegen, beispielsweise für die Seitennavigation auf Webseiten , weil Die Anzahl der Paginierungen ist undefiniert, daher können wir die Flexibilität nicht durch Festlegen der Breite einschränken.

Sie können text-align:center direkt für Elemente auf Blockebene mit variabler Breite festlegen, um dies zu erreichen, oder Sie können text-align:center zum übergeordneten Element hinzufügen, um den Zentrierungseffekt zu erzielen.

Wenn die Breite des Blockebenenelements mit variabler Breite keine Zeile einnimmt, können Sie die Anzeige auf Inline-Typ oder Inline-Block einstellen (auf Inline-Elementanzeige oder Inline-Blockelement einstellen)

<div class="container">
    <ul>
        <li><a href="#">1</a></li>
        <li><a href="#">2</a></li>
        <li><a href="#">3</a></li>
    </ul>
</div>
<style>
.container{text-align:center;background: beige}
.container ul{list-style:none;margin:0;padding:0;display:inline-block;}
.container li{margin-right:8px;display:inline-block;}
</style>

2 Zentrierung

Das Gleiche gilt für die vertikale Zentrierung. Legen Sie zunächst zwei Bedingungen fest: Das übergeordnete Element ist ein Box-Container und die Höhe wurde festgelegt. Das untergeordnete Element ist ein Inline-Element und die Höhe wird unterstützt In diesem Fall müssen Sie die Zeilenhöhe des übergeordneten Elements auf seine Höhe festlegen, um die untergeordneten Elemente vertikal zu zentrieren.

<div class="wrap line-height">
    <span class="span">111111</span></div>
<style>
.wrap{
            width:200px ;
            height: 300px;
            line-height: 300px;
            border: 2px solid #ccc;
        }
.span{
            background: red;
        }
</style>

3. Horizontal und vertikal zentrieren. Legen Sie im CSS-Tag fest display-Attribut auf Flex setzen, um das Flex-Layout zu implementieren, und dann align-items Das Attribut wird auf „center“ (horizontal zentriert) und das justify-content-Attribut auf „center“ (vertikal zentriert) gesetzt. Sie können die horizontale und vertikale Zentrierung einstellen.

76c82f278ac045591c9159d381de2c57
9fd01892b579bba0c343404bcccd70fb
93f0f5c25f18dab9d176bd4f6de5d30e
    a80eb7cbb6fff8b0ff70bae37074b813
    8f6d5a544bbc0d98e0f297ef053f784d
    ef0e6bda9678de73355aeb4407692a87
    b2386ffb911b14667cb8f0f91ea547a7Document6e916e0f7d1e588d4f442bf645aedb2f
9c3bca370b5104690d9ef395f2c5f8d1
6c04bd5ca3fcae76e30b72ad730ca86d
    f0873f1cb3abec04fcd24e69fa165f9c
        45a2772a6b6107b401db3c9b82c049c2测试54bdf357c58b8a65c66d7c19c8e4d114
16b28748ea4df4d9c2150843fecfba68
46d5fe1c7617e3914f214aaf043f4ccf
.mydiv{
    width:200px;
    height:100px;
    border:1px solid black;
    display:flex;
    align-items:center;
    justify-content:center;
}
531ac245ce3e4fe3d50054a55f265927
36cc49f0c466276486e50c850b7e4956
73a6ac4ed44ffec12cee46588e518a5e

Weitere Programmierkenntnisse finden Sie unter:

Programmiervideo! !

Das obige ist der detaillierte Inhalt vonWas sind die Ausrichtungsmethoden in CSS?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!