Comment réaliser un centrage horizontal, vertical et un partage de code d'alignement aux deux extrémités en CSS-tutoriel CSS-php.cn

Comment réaliser un centrage horizontal, vertical et un partage de code d'alignement aux deux extrémités en CSS

黄舟

Libérer： 2017-07-19 16:06:10

original

1995 Les gens l'ont consulté

Centrage vertical sur une seule ligne

Le centrage vertical sur une seule ligne peut être effectué directement en utilisant line-height=width

<p  style="width:100px;height:100px;line-height:100px;">
<span>hello world</span>
</p>

Copier après la connexion

De cette façon, le texte hello world est centré verticalement si vous. voulez que le p entier soit dedans Si les éléments parents sont tous centrés, alors une couche de p est imbriquée à l'extérieur et la marge du p intérieur est utilisée pour obtenir

<p style="position:relative;width:400px;height:200px;">
<p class="element" style="width:50%;height:50%;line-height:100px;">
<span>hello world</span>
</p>
</p>
.element {   position: absolute; left: 0; top: 0; right: 0; bottom: 0;   margin: auto 0;}

Copier après la connexion

Plusieurs lignes de centrage vertical

Si plusieurs lignes de centrage vertical sont utilisées, la hauteur de ligne ne fonctionnera pas. Vous devez ajouter display:table-cell of p, puis vertical-align:middle;

<p class="twoClass" >你好时间你好时间你好时间你好时间</p>
.twoClass{display:table-cell; width:200px; height:200px; vertical-align:middle;}

Copier après la connexion

En fait, cette méthode est également réalisable pour le centrage vertical d'une seule ligne.

Centrage horizontal

Pour le centrage horizontal du texte, il suffit de text-align:center Si vous souhaitez centrer un p positif, vous devez définir la marge-gauche margin-right; of p Cette démo implémente le centrage horizontal et vertical de p et du texte pour auto

<p style="position:relative;width:200px;height:200px;">
<p class="element" style="width:50%;height:50%;text-align:center;line-height:100px;">你好时间</p></p>
.element {   position: absolute; left: 0; top: 0; right: 0; bottom: 0;   margin: auto auto;}

Copier après la connexion

Alignez les deux extrémités

Pour l'alignement du texte sur plusieurs lignes, il suffit de text-align:justify

<p style="position:relative;width:100px;height:400px;text-align:justify;">
hello world he hello world你好世界你好世界你好世界， he hello world he hello你好世界你好世界你好世界， world he hello world he hello world he 
</p>

Copier après la connexion

Il convient de noter que ce multiligne Le dernier la ligne de texte n'est pas justifiée.

Si vous souhaitez opérer sur la dernière ligne, vous pouvez utiliser text-align-last: justifier mais il y a des problèmes de compatibilité.

Alignement des deux extrémités d'une seule ligne

<p style="width:400px;text-align-last:justify;">
我好帅
</p>

Copier après la connexion

De façon inattendue, un text-align-last: justifier peut être obtenu (chrome), mais cela n'a aucun effet dans le navigateur IE. . .

Voici quelques balises a que j'ai trouvées en ligne et alignées aux deux extrémités

.demo{
     text-align-last:justify;
     line-height:0;
     height:44px;


}
.demo a{
     width:20%;
     display:inline-block;
     height:44px;
     line-height:44px;
     text-align:center;


}

<p>模块内的元素之间为换行符</p>
<br />
<p class="demo">
   <a class="link" href="#none">10元</a>
   <a class="link" href="#none">20元</a>
   <a class="link" href="#none">30元</a>
   <a class="link" href="#none">50元</a>
</p>
<br />
<p>模块内的元素之间为空格符</p>
<br />
<p class="demo">
<a class="link" href="#none">10元</a> <a class="link" href="#none">20元</a> <a class="link" href="#none">30元</a> <a class="link" href="#none">50元</a>
</p>
<br />
<p>模块内的元素之间为无分隔符，justify不起作用</p>
<br />
<p class="demo"><a class="link" href="#none">选项1</a><a class="link" href="#none">选项2</a><a class="link" href="#none">选项3</a><a class="link" href="#none">选项4</a></p>

Copier après la connexion

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!