So legen Sie die Textausrichtung in CSS fest

Methode: 1. Verwenden Sie „text-align:center“ oder „margin:0 auto“, um die horizontale Mittenausrichtung festzulegen. 2. Verwenden Sie „line-height:value“ oder „display:table-cell;vertical-align:middle“. " Vertikale Mittelausrichtung einstellen.

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

1. Horizontale Zentrierung:

(1). Wenn das festgelegte Element Text, Bild usw. ist.

Inline-Element,

Setzen Sie text-align:center im übergeordneten Element ein, um das Inline-Element horizontal zu zentrieren, und stellen Sie die Anzeige des untergeordneten Elements auf Inline ein. Blockieren, sodass das untergeordnete Element zu einem Inline-Element wird. align: center wird nicht funktionieren. Die Zentrierung kann erreicht werden, indem der Wert „Linker und rechter Rand“ auf „Auto“ gesetzt wird.

<div class="parent" style="">
  <div class="child" style="">DEMO</div>
</div>

<style>
.parent{text-align: center;}    
.child{display: inline-block;}
</style>

(3)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, z. B. beim Paging Webseiten-Navigation: Da die Anzahl der Paginierungen ungewiss ist, können wir ihre Flexibilität nicht durch Festlegen der Breite einschränken.

Sie können text-align:center direkt auf Elemente auf Blockebene mit variabler Breite setzen, 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="parent" style="">
  <div class="child" style="">DEMO</div>
</div>

.child{
  width: 200px;
  margin: 0 auto;
}

2. Vertikale Zentrierung:

Dasselbe wie bei der horizontalen Zentrierung, hier sprechen wir von vertikaler Zentrierung. Legen Sie zunächst zwei Bedingungen fest:

Das übergeordnete Element ist ein Boxcontainer

und

Die Höhe wurde festgelegt

Szenario 1: Das untergeordnete Element ist ein Inline-Element und die Höhe wird durch seinen Inhalt bestimmt.

In diesem Fall müssen Sie die Zeilenhöhe des übergeordneten Elements auf seine Höhe einstellen, um das untergeordnete Element vertikal zu zentrieren

<div class="container">
    <ul>
        <li><a href="#">1</a></li>
        <li><a href="#">2</a></li>
        <li><a href="#">3</a></li>
    </ul>
</div>

.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;}

Szenario 2: Das untergeordnete Element ist ein Element auf Blockebene, aber die Höhe des untergeordneten Elements ist nicht festgelegt. In diesem Fall ist die Höhe des untergeordneten Elements tatsächlich unbekannt und kann nicht durch Berechnung des Abstands oder des Rands angepasst werden , aber es gibt noch einige Lösungen.

Lösen Sie es, indem Sie display:table-cell;vertical-align:middle auf das übergeordnete Element setzen

<div class="wrap line-height">
    <span class="span">111111</span>
</div>

.wrap{
            width:200px ;
            height: 300px;
            line-height: 300px;
            border: 2px solid #ccc;
        }
.span{
            background: red;
        }

Ergebnis

Szenario 3: Das untergeordnete Element ist ein Element auf Blockebene und die Höhe wurde festgelegt

Berechnen Sie das untergeordnete Element. Der obere oder untere Rand des Elements. Die Berechnungsmethode ist übergeordnetes Element (Elementhöhe - untergeordnete Elementhöhe)/2 „

Das obige ist der detaillierte Inhalt vonSo legen Sie die Textausrichtung in CSS fest. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!