Création d'une classe de texte centrée en CSS

Je rencontre des difficultés pour configurer certains éléments CSS.Création d'une classe de texte centrée en CSS

Voici mon index.html:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

<html> 
<head> 
<title>My Site</title> 
<link rel="stylesheet" type="text/css" href="http://www.mysite.com/general.css" /> 
</head> 
<body> 
<text class="center" Welcome!> 
</br> 
<img src="<myimage>" alt="Logo" class="center"> 
</body> 
</html>

et voici mon fichier general.css:

img.center {display:block; margin-left:auto; margin-right:auto;} 
body{background-color:#b0c4de;} 
text{font-family:"Lucida Console";} 
text.center{font-family:"Lucida Console"; text-align:center;}

Mon image est centrée, comme je veux que ce soit. Cependant, je voudrais configurer mon texte pour toujours utiliser Lucida Console comme police. Mais je veux aussi pouvoir configurer une classe spécifique pour centrer la police, comme pour l'image.

Quelqu'un pourrait-il m'aider s'il vous plaît? Merci beaucoup.

Source

2011-10-08 Tim

Cet élément text ne semble pas valide. Vous n'avez pas besoin de mettre un élément de texte autour du texte, et au moins pas de cette façon.

Essayez ceci:

p { 
    font-family: 'Lucida Console'; 
} 
p.center { 
    text-align: center; 
}

Ensuite vos paragraphes ressemblera à ceci:

<p>Your text goes here</p> 
<p class="center">Your centered text goes here</p> 
<p>Your text goes here</p>

Par ailleurs, il est peu judicieux d'appeler une telle classe « centre », car il dit seulement comment ça regarde, pas ce que ça veut dire. Au lieu de cela, essayez de déterminer quel type d'information est dans ce paragraphe centré (comme un «message» ou un «message de bienvenue») et nommez votre classe en conséquence. De cette façon, le document contient la structure du document et les méta descriptions sous la forme de classes, tandis que la mise en page réelle est entièrement spécifiée en CSS. Ensuite, lorsque vous voulez que vos messages soient en italique au lieu d'être centrés, vous pouvez simplement modifier la classe dans le fichier css et vous avez terminé.

Source

2011-10-08 21:37:43 GolezTrol

J'ai du mal à trouver une « excuse » sémantique pour le centrage des choses wihout ballonnement CSS (le déclarant sur beaucoup d'éléments séparés). Je ne dirais pas que c'est "imprudent", parce que quiconque travaille sur le HTML ou CSS comprendra immédiatement sa signification de présentation, je dirais que c'est peut-être "impur" en ce qui concerne la séparation contenu/présentation. Mais oui, c'est à peu près aussi mauvais qu'un '

' tag ... Mais comment on nomme sémantiquement les classes pour aligner les images à gauche ou à droite sans '.left' et' .right'? –

Merci GolezTrol. C'est ce que je cherchais. – Tim

@WesleyMurch La question est fausse. :) Vous ne devriez pas demander "Comment nommer la classe pour aligner les images vers la gauche". Mais "Comment nommer la classe pour aligner les vignettes dans la vue d'ensemble" événement récent "" ou quelque chose. Ensuite, vous pouvez créer une bonne classe et décider que ce type d'image doit s'aligner à gauche ou à droite (ou à son tour). Bien sûr, lorsque vous alignez des images de façon aléatoire dans un grand article, il n'y a pas de règles réelles et vous devrez voir ce qui semble bien par image. Dans ce cas, j'imagine que vous voulez utiliser des classes «gauche» et «droite». – GolezTrol

-1

Je ne sais pas pourquoi vous utilisez, mais jetez un oeil à cet exemple: -

http://jsfiddle.net/JPzRr/1/

img.center {display:block; margin-left:auto; margin-right:auto;} 
body{background-color:#b0c4de;} 
p {font-family:"Lucida Console";} 
p.center { 
    font-family:"Lucida Console"; 
    text-align:center; 
} 

<body> 
    <p class="center">Welcome!</p> 
<br /> 
<img src="<myimage>" alt="Logo" class="center">

Source

2011-10-08 21:38:45 KryptoniteDove

Bienvenue! 'et'
'sont tous les deux incorrects, et votre violon est également très en désordre. –

Ça fait un bon moment:/ – KryptoniteDove

Cela ne vaut pas la peine pour quiconque de sortir des réponses brisées avec de mauvais exemples, OP semble mal informé comme il est. Prenez le jour de congé avant que ces trucs ne se faufilent dans votre vrai code :) –

Création d'une classe de texte centrée en CSS

Répondre

Questions connexes