Wie zentriere ich Text in CSS? So legen Sie die vertikale Zentrierung von CSS-Text fest

Im Prozess des Webdesigns müssen Sie manchmal den Text zentrieren, um ein schönes Layout zu erhalten. Wie zentriert man den Text? In diesem Artikel erfahren Sie, wie Sie die vertikale Textzentrierung in CSS festlegen.

Zunächst müssen wir wissen, dass es relativ einfach ist, über CSS eine horizontale Zentrierung von Elementen zu erreichen: Für Text müssen Sie nur text-align: center auf das übergeordnete Element und setzen Für Elemente auf Blockebene wie div müssen Sie nur die Randwerte von links und rechts auf automatisch festlegen, um eine vertikale Zentrierung der Elemente zu erreichen. Einige Leute werden an das Attribut „Vertical-Align“ in CSS denken, aber es dauert nur Effekt für Elemente mit dem valign-Attribut. Schauen wir uns als Nächstes die CSS-Implementierungsmethoden für die vertikale Zentrierung einzelner Texte und die vertikale Zentrierung mehrerer Texte an.

Sehen wir uns zunächst die vertikale Zentrierung von einzeiligem CSS-Text an

Für einzeiligen Text müssen wir nur die Textzeilenhöhe (Zeilenhöhe) ändern. und die Fläche Stellen Sie einfach die Höhe so ein, dass sie konsistent ist.

CSS-Implementierungscode für die vertikale Zentrierung von einzeiligem Text:

HTML:

<div id="div1">
        php中文网单行文本垂直居中
    </div>

CSS

:

 #div1{
            width: 300px;
            height: 100px;
            margin: 50px auto;
            border: 1px solid red;
            line-height: 100px; /*设置line-height与父级元素的height相等*/
            text-align: center; /*设置文本水平居中*/
            overflow: hidden; /*防止内容超出容器或者产生自动换行*/
        }

Der vertikale Zentrierungseffekt von einzeiligem CSS-Text ist wie folgt:

Dann sehen wir uns die vertikale Zentrierung von Zeilentext an.

Erklärung: Es gibt zwei Fälle der vertikalen Zentrierung von mehrzeiligem Text. Der eine besteht darin, dass die Höhe des übergeordneten Elements nicht festgelegt ist und sich mit dem Inhalt ändert ; Das andere ist, dass die Höhe des übergeordneten Elements festgelegt ist.

1. Die Höhe des übergeordneten Elements ist nicht festgelegt

Wenn die Höhe des übergeordneten Elements nicht festgelegt ist, kann die Höhe nur um den internen Text erweitert werden . So können wir den Text vertikal zentriert erscheinen lassen, indem wir den Wert von padding festlegen. Stellen Sie einfach die Werte von padding-top und padding-bottom auf den gleichen Wert ein:

css mehrzeiliger Text vertikal zentrierter Code:

HTML:

  <div id="div1">
            php中文网多行文本垂直居中，
            php中文网多行文本垂直居中，
            php中文网多行文本垂直居中，
            php中文网多行文本垂直居中。
    </div>

CSS:

  #div1{
            width: 300px;
            margin: 50px auto;
            border: 1px solid red;
            text-align: center; /*设置文本水平居中*/
            padding: 50px 20px;
        }

Der vertikale Zentrierungseffekt von mehrzeiligem CSS-Text ist wie folgt:

2. Die Höhe des übergeordneten Elements ist festgelegt

Das Vertical-Align-Attribut in CSS ist nur für Elemente mit wirksam In Kombination mit display: table; kann div das Tabellenattribut simulieren. Daher können wir das Anzeigeattribut des übergeordneten div: display: table;; festlegen und dann ein div mit Textinhalt hinzufügen und dessen display: table-cell;

CSS-Code für mehrzeilige Textvertikalzentrierung:

HTML:

<div id="outer">
        <div id="middle">
            php中文网固定高度多行文本垂直居中，
            php中文网固定高度多行文本垂直居中，
            php中文网固定高度多行文本垂直居中，
            php中文网固定高度多行文本垂直居中。
        </div>
    </div>

CSS:

#outer{
            width: 400px;
            height: 200px;
            margin: 50px auto;
            border: 1px solid red;
            display: table;
        }
        #middle{ 
            display:table-cell; 
            vertical-align:middle;  
            text-align: center; /*设置文本水平居中*/  
            width:100%;   
        }

Der vertikale Zentrierungseffekt von mehrzeiligem CSS-Text ist wie folgt:

Dieser Artikel endet hier. Tatsächlich gibt es andere Methoden, auf die ich nicht eingehen werde Für weitere spannende Inhalte können Sie auf die chinesische PHP-Website achten.

Das obige ist der detaillierte Inhalt vonWie zentriere ich Text in CSS? So legen Sie die vertikale Zentrierung von CSS-Text fest. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!