So verwenden Sie CSS, um Text links, rechts und in der Mitte auszurichten-CSS-Tutorial-php.cn

So verwenden Sie CSS, um Text links, rechts und in der Mitte auszurichten

不言

Freigeben： 2018-11-15 10:26:45

Original

24499 Leute haben es durchsucht

Die Position des Textes ist im Webseiten-Layout von entscheidender Bedeutung. Im heutigen Artikel erfahren Sie, wie Sie mithilfe von CSS eine linke, rechte und zentrierte Ausrichtung des Textes erreichen.

Um die Textausrichtung festzulegen (linke Ausrichtung, rechte Ausrichtung, mittlere Ausrichtung), müssen Sie das CSS-Attribut text-align verwenden. (Verwandte Empfehlungen: CSS-Lernhandbuch)

Grammatikformat:

text-align :(文本位置）

Nach dem Login kopieren

位置	说明
left	左对齐
right	右对齐
center	居中对齐
justify	两端对齐

Als nächstes schauen wir uns an, wie diese vier Ausrichtungsmethoden separat festgelegt werden

So stellen Sie die linke Textausrichtung ein:

text-align：left;

Nach dem Login kopieren

So stellen Sie die rechte Textausrichtung ein:

text-align：right;

Nach dem Login kopieren

So stellen Sie die zentrierte Textausrichtung ein:

text-align：center;

Nach dem Login kopieren

So legen Sie die Ausrichtung beider Textenden fest:

text-align：justify;

Nach dem Login kopieren

Sehen wir uns das spezifische Codebeispiel 1 an:

TextAlign.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="TextAlign.css" />
    <title></title>
    </head>
    <body>
  <div class="TextLeft">
    php中文网左对齐<br />
    php中文网<br />
    php中文网<br />
    php
  </div>
  <div class="TextRight">
    php中文网右对齐<br />
   php中文网<br />
    php中文网<br />
    php
  </div>
  <div class="TextCenter">
    php中文网居中对齐<br />
    php中文网<br />
    php中文网<br />
    php
  </div>
  <div class="TextJustify">
    php中文网<br />
    两端对齐<br />
    php中文网<br />
    php
    </div>
    </body>
    </html>

Nach dem Login kopieren

TextAlign.css

.TextLeft{
    margin-top:24px;    
    margin-left:32px;    
    border:1px solid #ff6a00;    
    width:480px;    
    text-align:left;
}
.TextRight {
    margin-top: 24px;    
    margin-left: 32px;    
    border: 1px solid #ff6a00;    
    width: 480px;    
    text-align: right;
}
.TextCenter {
    margin-top: 24px;    
    margin-left: 32px;    
    border: 1px solid #ff6a00;    
    width: 480px;    
    text-align: center;
}
.TextJustify {
    margin-top: 24px;    
    margin-left: 32px;    
    border: 1px solid #ff6a00;    
    width: 480px;    
    text-align: justify;    
    text-justify: distribute-all-lines;
}

Nach dem Login kopieren

Ergebnis anzeigen

Verwenden Sie einen Webbrowser, um die obige HTML-Datei anzuzeigen. Der unten gezeigte Effekt wird angezeigt.

So verwenden Sie CSS, um Text links, rechts und in der Mitte auszurichten

Codebeispiel 2:

Text linksbündig:

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<meta charset="utf-8">
	<style type="text/css">
.leftText{
  text-align:left; 
  }
	</style>
</head>
<body>
<div class="leftText">左对齐</div>
</body>
</html>

Nach dem Login kopieren

Text rechtsbündig:

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<meta charset="utf-8">
	<style type="text/css">
.rightText{
  text-align:right; 
  }
	</style>
</head>
<body>
<div class="rightText">右对齐</div>
</body>
</html>

Nach dem Login kopieren

Mittige Ausrichtung:

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<meta charset="utf-8">
	<style type="text/css">
.centerText{
  text-align:center; 
  }
	</style>
</head>
<body>
<div class="centerText">居中对齐</div>
</body>
</html>

Nach dem Login kopieren

Dieser Artikel endet hier. Folgen Sie dem CSS Video-Tutorial Spalte der chinesischen PHP-Website! ! !

Das obige ist der detaillierte Inhalt vonSo verwenden Sie CSS, um Text links, rechts und in der Mitte auszurichten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!