Programmation » Alignement vertical en CSS
Alignement vertical en CSS
Publié le 21/01/2007 @ 11:12:32,
Par renatoBonjour, j'ai 2 boîtes en CSS, un petit bloc texte dans un grand bloc et j'aimerais que le petit bloc de texte soit centré (en vertical et en horizontal) dans le + grand bloc.
Le code CSS :
#texte {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
font-style: normal;
font-weight: bold;
color: #000000;
position: absolute;
left: 0px;
top: 0px;
}
#conteneur {
position: relative;
background-color: #6699CC;
height: 120px;
width: 250px;
}
-->
</style>
Le code en Html :
<div id="conteneur">
<h1 id="texte">Les alignements</h1>
</div>
Merci pour vos conseils.
A +
Le code CSS :
#texte {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
font-style: normal;
font-weight: bold;
color: #000000;
position: absolute;
left: 0px;
top: 0px;
}
#conteneur {
position: relative;
background-color: #6699CC;
height: 120px;
width: 250px;
}
-->
</style>
Le code en Html :
<div id="conteneur">
<h1 id="texte">Les alignements</h1>
</div>
Merci pour vos conseils.
A +
Fichier: file_49292_ok.gif
( 9.4 KB - 1002 )
Alignement vertical en CSS
Publié le 22/01/2007 @ 08:00:37,
Par renatoBonjour, j'ai reçu un message me disant que l'utilisateur "cauet" venait de poster une réponse à mon message, mais sur ce Forum je ne vois pas la réponse en question.
Donc, vous avez dit Bizarre ?
Où est la réponse ?
A +
Donc, vous avez dit Bizarre ?
Où est la réponse ?
A +
Alignement vertical en CSS
Publié le 22/01/2007 @ 08:51:32,
Par Jean-Christophepeut-être l'a-t-il effacée ensuite
![:spamafote: :spamafote:](images/smileys/spamafote.gif)
Alignement vertical en CSS
Publié le 22/01/2007 @ 09:39:20,
Par cauetoui.
a tu regardé la commande 'vertical-align'?
a tu regardé la commande 'vertical-align'?
Alignement vertical en CSS
Publié le 01/08/2007 @ 20:54:13,
Par Kraftonsalut,
Le probleme c'est que 'vertical-align', a ma connaissance, ne s'applique qu'aux cellules de table.
Tu peux essayer ca :
Ca c'est la solution comme il faudrait, mais cela ne marches pas avec ie6 (seulement a parti de la version 7)
<html>
<head>
<title>Untitled Document</title>
<style type="text/css">
<!--
#texte {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
font-style: normal;
font-weight: bold;
color: #000000; }
#conteneur {
display: table-cell;
vertical-align: middle;
text-align: center;
background-color: #6699CC;
width: 500px;
height: 300px; }
-->
</style>
</head>
<body>
<div id="conteneur">
<h1 id="texte">Les alignements</h1>
</div>
</body>
</html>
Je te conseilles de le faire comme ca :
<html>
<head>
<title>Untitled Document</title>
<style type="text/css">
<!--
body { margin: 20px; }
#texte {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
font-style: normal;
font-weight: bold;
color: #000000;
position:relative;
top:50%;
margin-top:-12px; /* taille de ta font */
}
#conteneur {
text-align:center;
background-color: #6699CC;
width:500px;
height:300px;
border:1px solid #6699CC; /* faut laisser ca */
}
-->
</style>
</head>
<body>
<div id="conteneur">
<h1 id="texte">Les alignements</h1>
</div>
</body>
</html>
Chez moi ca marches.
Dernière édition: 01/08/2007 @ 20:57:22
Le probleme c'est que 'vertical-align', a ma connaissance, ne s'applique qu'aux cellules de table.
Tu peux essayer ca :
Ca c'est la solution comme il faudrait, mais cela ne marches pas avec ie6 (seulement a parti de la version 7)
<html>
<head>
<title>Untitled Document</title>
<style type="text/css">
<!--
#texte {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
font-style: normal;
font-weight: bold;
color: #000000; }
#conteneur {
display: table-cell;
vertical-align: middle;
text-align: center;
background-color: #6699CC;
width: 500px;
height: 300px; }
-->
</style>
</head>
<body>
<div id="conteneur">
<h1 id="texte">Les alignements</h1>
</div>
</body>
</html>
Je te conseilles de le faire comme ca :
<html>
<head>
<title>Untitled Document</title>
<style type="text/css">
<!--
body { margin: 20px; }
#texte {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
font-style: normal;
font-weight: bold;
color: #000000;
position:relative;
top:50%;
margin-top:-12px; /* taille de ta font */
}
#conteneur {
text-align:center;
background-color: #6699CC;
width:500px;
height:300px;
border:1px solid #6699CC; /* faut laisser ca */
}
-->
</style>
</head>
<body>
<div id="conteneur">
<h1 id="texte">Les alignements</h1>
</div>
</body>
</html>
Chez moi ca marches.
Dernière édition: 01/08/2007 @ 20:57:22
Alignement vertical en CSS
Publié le 02/08/2007 @ 11:16:37,
Par zionJe pense que 7 mois après il a abandonné... Ou il a trouvé
![:petrus: :petrus:](images/smileys/petrus.gif)
Je suis le Roy
![:ocube: :ocube:](images/smileys/ocube.gif)
Alignement vertical en CSS
Publié le 02/08/2007 @ 11:28:29,
Par kortenbergmais le suivant qui fait une recherche, il sera bien content de trouver une réponse.
Alignement vertical en CSS
Publié le 02/08/2007 @ 11:53:46,
Par KraftonEn effet, j'avais pas regarde la date
Il est mort ce forum.
Bah peut-etre que ca aideras quelq'un un jour, comme c'est parti ca risques pas de quitter la premiere page
![:smile: :smile:](images/smileys/smile.gif)
Il est mort ce forum.
Bah peut-etre que ca aideras quelq'un un jour, comme c'est parti ca risques pas de quitter la premiere page
Alignement vertical en CSS
Publié le 02/08/2007 @ 11:59:20,
Par zion
Alignement vertical en CSS
Publié le 02/08/2007 @ 12:14:43,
Par ovhCa doit pas être un habitué des forums...
Sur tous les forums du monde il existe des topics laissés à l'abandon, souvent même par le posteur initial comme c'est le cas ici
Sur tous les forums du monde il existe des topics laissés à l'abandon, souvent même par le posteur initial comme c'est le cas ici
![:wink: :wink:](images/smileys/wink.gif)
Je n'ai rien à voir avec www.ovh.com
Alignement vertical en CSS
Publié le 02/08/2007 @ 12:16:30,
Par zionDisons qu'à part HFR ou ton topic disparait le jour même, même sur développez.net qui est énorme dans la section kylix y a des topics de quasi 2 ans sur la première page ...
![:oh: :oh:](images/smileys/oh.gif)
Je suis le Roy
![:ocube: :ocube:](images/smileys/ocube.gif)
Alignement vertical en CSS
Publié le 02/08/2007 @ 12:16:52,
Par tuloravouluSi c'est son site , il n'a pas vraiment de leçons à donner.
![:spamafote: :spamafote:](images/smileys/spamafote.gif)
"L'amour pour épée, l'humour pour bouclier." Bernard Werber
Alignement vertical en CSS
Publié le 02/08/2007 @ 12:20:18,
Par ziontutu> Oui mais non, ça va dégénérer
![:ddr555: :ddr555:](images/smileys/ddr555.gif)
Je suis le Roy
![:ocube: :ocube:](images/smileys/ocube.gif)
Alignement vertical en CSS
Publié le 02/08/2007 @ 12:27:08,
Par Clandestinozion > Et alors ? Tu sais bien qu'on n'attend que ça
![:whistle: :whistle:](images/smileys/whistle.gif)
Alignement vertical en CSS
Publié le 02/08/2007 @ 12:47:37,
Par KraftonQu'elle agressivite...
1 - Je suis pas un habitue des forums.
2 - Les topics abandonnes il-y-en a toujours, mais en premiere pages un topic sans reponses depuis 7 mois, c'est rare.
je vais souvent sur http://www.alsacreations.com/ pour trouver de l'aide, en general les topics de plus d'une semaine se trouvent en page 2
3 - Je ne pretends pas de donner de lecons, le probleme rencontre, je l'ai eu aussi, je voulais simplement aider.
4 - Desole si mes remarques on blesses quelq'un c'etait pas le but
5 - Vous devriez passer moins de temps a reagir de la sorte, aidez plustot les personnes qui viennent ici pour trouver de l'aide. (Peut-etre qu'il y aurais mois de topics abandonnes).
Je m'etais inscrit ici, parce que je trouvais que c'etait une initiative interessante, vu l'accueil, je le regrete. Je ne viendrais plus vous embeter...
1 - Je suis pas un habitue des forums.
2 - Les topics abandonnes il-y-en a toujours, mais en premiere pages un topic sans reponses depuis 7 mois, c'est rare.
je vais souvent sur http://www.alsacreations.com/ pour trouver de l'aide, en general les topics de plus d'une semaine se trouvent en page 2
3 - Je ne pretends pas de donner de lecons, le probleme rencontre, je l'ai eu aussi, je voulais simplement aider.
4 - Desole si mes remarques on blesses quelq'un c'etait pas le but
5 - Vous devriez passer moins de temps a reagir de la sorte, aidez plustot les personnes qui viennent ici pour trouver de l'aide. (Peut-etre qu'il y aurais mois de topics abandonnes).
Je m'etais inscrit ici, parce que je trouvais que c'etait une initiative interessante, vu l'accueil, je le regrete. Je ne viendrais plus vous embeter...
Alignement vertical en CSS
Publié le 02/08/2007 @ 12:51:25,
Par zionCa se voit, on arrive pas dans un groupe de gens en criant "éééh salut les loosers" en espérant après avoir un grand sourire.
2 - Les topics abandonnes il-y-en a toujours, mais en premiere pages un topic sans reponses depuis 7 mois, c'est rare.
Pas du tout, ca dépend des forums et des catégories.
5 - Vous devriez passer moins de temps a reagir de la sorte, aidez plustot les personnes qui viennent ici pour trouver de l'aide. (Peut-etre qu'il y aurais mois de topics abandonnes).
cfr le point 1, le ton est vraiment pas approprié.
Je suis le Roy
![:ocube: :ocube:](images/smileys/ocube.gif)
Alignement vertical en CSS
Publié le 02/08/2007 @ 13:26:31,
Par maxDémasqués ! Nous sommes démasqués !
En effet, nous ne sommes pas des informaticiens mais nous professons dans la noble et belle catégorie des éleveurs d'animaux à fourrure.
Comme nous en avions marre de nous ramasser tous les défenseurs de la cause animale sur notre ancien forum, nous avons créer celui-ci de toute pièce pour pouvoir continuer notre activité en toute quiétude.
Je remercie Krafton d'avoir mis en évidence une faille dans notre système.
Je vais tout de même le remercier vraiment pour avoir pris la peine de s'être inscrit et d'avoir apporté une réponse, ça partait d'un bon sentiment. Le ton et la forme des réponse qui ont suivi (d'un côté comme de l'autre) ont pris un tour désolant. Les boutades sur les forums internetiens, c'est tout un art, il est préférable de bien connaitre son publique (ou de tricher avec une tonne de smiley).
Max,
médiateur de la cause des éléveurs d'animaux à fourrure informaticiens (les éléveurs ou les animaux ? nul ne le sait)
En effet, nous ne sommes pas des informaticiens mais nous professons dans la noble et belle catégorie des éleveurs d'animaux à fourrure.
Comme nous en avions marre de nous ramasser tous les défenseurs de la cause animale sur notre ancien forum, nous avons créer celui-ci de toute pièce pour pouvoir continuer notre activité en toute quiétude.
Je remercie Krafton d'avoir mis en évidence une faille dans notre système.
![:smile: :smile:](images/smileys/smile.gif)
Je vais tout de même le remercier vraiment pour avoir pris la peine de s'être inscrit et d'avoir apporté une réponse, ça partait d'un bon sentiment. Le ton et la forme des réponse qui ont suivi (d'un côté comme de l'autre) ont pris un tour désolant. Les boutades sur les forums internetiens, c'est tout un art, il est préférable de bien connaitre son publique (ou de tricher avec une tonne de smiley).
Max,
médiateur de la cause des éléveurs d'animaux à fourrure informaticiens (les éléveurs ou les animaux ? nul ne le sait)
Trololo
Alignement vertical en CSS
Publié le 02/08/2007 @ 13:40:54,
Par PoireLa réponse c'est qu'il faut utiliser line-height
http://wiki.mediabox.fr/documentation/css/line-height
http://forum.alsacreations.com/faq/faq-3-Comment-centrer-verticalement-un-element-.html
http://css.alsacreations.com/Faire-une-mise-en-page-sans-tableaux/Centrer-les-elements-ou-un-site-web-en-CSS
Je défendrai mes opinions jusqu'à ma mort, mais je donnerai ma vie pour que vous puissiez défendre les vôtres. (Voltaire)
Photos
http://wiki.mediabox.fr/documentation/css/line-height
http://forum.alsacreations.com/faq/faq-3-Comment-centrer-verticalement-un-element-.html
http://css.alsacreations.com/Faire-une-mise-en-page-sans-tableaux/Centrer-les-elements-ou-un-site-web-en-CSS
![:topicalacon: :topicalacon:](images/smileys/topicalacon.gif)
Je défendrai mes opinions jusqu'à ma mort, mais je donnerai ma vie pour que vous puissiez défendre les vôtres. (Voltaire)
Photos
Alignement vertical en CSS
Publié le 02/08/2007 @ 13:52:01,
Par gizmoDisons qu'à part HFR ou ton topic disparait le jour même, même sur développez.net qui est énorme dans la section kylix y a des topics de quasi 2 ans sur la première page ...
![:oh: :oh:](images/smileys/oh.gif)
ouais, mais d'un autre cote, Kylix, c'est mort, donc c'est normal
![:oh: :oh:](images/smileys/oh.gif)
Concept vivant.
Alignement vertical en CSS
Publié le 02/08/2007 @ 13:53:43,
Par zionJe l'attendais celle la
![:ddr555: :ddr555:](images/smileys/ddr555.gif)
Je suis le Roy
![:ocube: :ocube:](images/smileys/ocube.gif)