Comment centrer et aligner à droite la balise span HTML ? Voici l'analyse de style des balises span HTML

Cet article explique principalement comment centrer et aligner à droite le texte de la balise span en HTML. Il existe également divers exemples ici. Jetons un coup d'œil ci-dessous

Tout d'abord, prenons. un aperçu de la manière dont l'attribut HTML span est centré ?

En fait, il existe de nombreuses façons de centrer le texte span. Voici un moyen plus simple d'insérer la ligne de code suivante dans le code :

style= " text-align. :center; line-height:18px; "

Text-align:center centré horizontalement;

Définir la hauteur de la ligne : 18px; Identique à span Si la hauteur est de même, le texte peut être centré verticalement (une seule ligne de texte).

Le centrage horizontal est très simple, il suffit de définir text-align:center, mais le centrage vertical a toujours été déroutant !

J'ai toujours essayé d'ajuster le rembourrage-haut dans le passé, mais parfois cela a fonctionné, et la plupart du temps cela n'a pas fonctionné. C'est la même chose aujourd'hui, lorsque la valeur de la hauteur n'est pas grande, en augmentant le rembourrage. top augmentera toute la hauteur du DIV ou du SPAN.

Je pensais qu'en théorie, la valeur par défaut de vertical-align devrait être la ligne de base, pas l'alignement en haut, et tout à coup je me suis souvenu que la police a un attribut de hauteur de ligne, donc évidemment sa valeur par défaut est aussi élevée que un caractère, donc modifiez la valeur de la hauteur de ligne pour qu'elle soit la même que la hauteur de DIV ou SPAN !

De cette façon, le texte en DIV et SPAN sera aligné verticalement au centre.

Regardons un exemple de balise span :

<style>
div {text-align:center;}
div dd,div dt {text-align:left;}
</style>
<div>
<dl>
<dd>111</dd>
<dt>11111111111111</dt>
<dd>222</dd>
<dt>222222222222222</dt>
</dl>
<span><a href="www.php.cn">水平居中</a></span>
</div>

De cette façon, le contenu de la balise span sera affiché au centre de la page . L'effet est le suivant :

Le prochain problème que nous devons résoudre est de savoir comment aligner à droite ?

Lorsque nous créons des sites Web, nous ajoutons souvent un alignement à droite du span à div, li et span. Par exemple : dans la liste des articles, nous ajouterons du temps pour l'aligner à droite pour augmenter la lisibilité. de la page web. , le code suivant :

html est le suivant :

<ul class="news">
    <li>span右对齐,换行显示的解决方法<span>2010-8-26</span></li>
</ul>

css : .news ul li span{float:right;}

Mais le problème revient, souvent nous le sommes. Lorsque vous ajoutez une étendue à un bloc, vous constaterez que l'étendue est alignée à droite lors de la prévisualisation sur la page Web. Alors pourquoi ?

Il s'avère que lorsque les éléments non flottants et les éléments flottants sont ensemble, si les éléments non flottants sont devant, les éléments flottants seront séparés. Par conséquent, même si la durée est float:right, le. l'affichage du texte est float:none, donc la durée sera exclue.

Deux solutions pour aligner à droite les balises span HTML sans retour à la ligne :

1. Afficher l'étendue avant le texte

<ul class="news">
    <li><span>2010-8-26</span>span右对齐,换行显示的解决方法</li>
</ul>

2. Laissez le texte flotter :gauche

<ul class="news">
<li><span class="fl">span右对齐,换行显示的解决方法<span><span class="fr">2010-8-26</span></li>
</ul>
.fl {float:left;}
.fr{float:right;}

La deuxième méthode n'est pas aussi simple que la première méthode. Pour la simplicité du code de la page Web, il est recommandé d'utiliser. la première méthode.

D'accord, ce qui précède concerne les méthodes de centrage et d'alignement à droite des balises HTML span. J'espère que cela vous sera utile. Si vous avez des questions, vous pouvez les poser ci-dessous

[Note de l'éditeur. recommandation]

Comment écrire un chemin relatif pour la balise de base en HTML ? (Introduction à l'utilisation incluse)

Quel est le rôle de la balise méta HTML ? Introduction à l'utilisation des balises méta html

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!