Alignement vertical ET horizontal
noerubiks Messages postés 159 Date d'inscription Statut Membre Dernière intervention -
Pierrecastor Messages postés 41491 Date d'inscription Statut Modérateur Dernière intervention - 11 févr. 2013 à 16:41
Pierrecastor Messages postés 41491 Date d'inscription Statut Modérateur Dernière intervention - 11 févr. 2013 à 16:41
A voir également:
- Alignement vertical ET horizontal
- Powerpoint vertical - Guide
- Ps5 horizontal ou vertical - Accueil - Guide jeu vidéo
- Écran vertical au lieu horizontal - Guide
- Forum MacOS
- Forum Téléviseurs
22 réponses
Bonjour, j'ai une class "cadre", et j'aimerai la centrer horizontalement ET verticalement, ce qui veux dire que meme en changeant la page, mon cadre reste au entre de la page ;)
PS: j'aimerai faire sa en CSS ;)
PS: j'aimerai faire sa en CSS ;)
#cadre{
position:absolute;
left : 50%;
top : 50%;
border : 1px solid #aaa;
width : 400px;
height : 300px;
margin-top : -150px;
margin-left: -200px;
}
Regardez ce lien http://creer-un-site.fr et visualisez la démo.
Une question stupide engendre une réponse stupide!
Une question mal formulé engendre une réponse aléatoire!
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question excellent, merci !
mais sauriez vous aussi comment aligner seulement horizontalement, ou seulement verticalement, car j'ai encore un peut de mal !
Merci ! ;)
mais sauriez vous aussi comment aligner seulement horizontalement, ou seulement verticalement, car j'ai encore un peut de mal !
Merci ! ;)
Dans les 2 lignes qu'a citer tryan
left : 50%; // sert à aligner horizontalement
top : 50%; // sert à aligner verticalement
à toi de saisir une des 2 lignes
left : 50%; // sert à aligner horizontalement
top : 50%; // sert à aligner verticalement
à toi de saisir une des 2 lignes
Et encore une dernière question, j'aimerai centrer le contenu de mon bloc, mais je n'y arrive pas. Comment faire ?
oui !
HTML:
CSS:
HTML:
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <link rel="stylesheet" href="style.css" /> <title>Document sans nom</title> <a name="h"></a> </head> <center> <body> <span class="cadre"> <span class="b1"> <a href="#b"><img src="b1.jpg" height="65"></a> </span> <p> <span class="txt"> Site créé par Noé ! </span> </p> <p><span class="b2"> <a href="#h"><img src="b2.jpg" height="65"></a> </span></p> </span> </body> </center> <footer> <a name="b"></a> </footer> </html>
CSS:
@charset "UTF-8";
/* CSS Document */
.cadre
{
position: absolute;
left : 50%;
top : 50%;
border : 1px solid #666;
width : 400px;
height : 300px;
margin-top : -150px;
margin-left: -200px;
vertical-align: middle;
padding: 20px 0;
}
.b1, .b2
{
display: block;
text-align: center;
margin: auto;
}
body
{
background-color: #999;
}
*
{
font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
}
exemple
remplacer
.cadre
{
position: absolute;
left : 50%;
top : 50%;
border : 1px solid #666;
width : 400px;
margin-top : -150px;
margin-left: -200px;
padding: 35px 0;
}
PAR
.cadre
{
position: absolute;
left : 50%;
top : 50%;
border : 1px solid #666;
width : 400px;
height : 300px;
margin-top : -150px;
margin-left: -200px;
vertical-align: middle;
padding: 20px 0;
}
remplacer
.cadre
{
position: absolute;
left : 50%;
top : 50%;
border : 1px solid #666;
width : 400px;
margin-top : -150px;
margin-left: -200px;
padding: 35px 0;
}
PAR
.cadre
{
position: absolute;
left : 50%;
top : 50%;
border : 1px solid #666;
width : 400px;
height : 300px;
margin-top : -150px;
margin-left: -200px;
vertical-align: middle;
padding: 20px 0;
}
chez moi ca marche bien
par contre j'ai inversé, c'est ca qu'il faut mettre :
.cadre
{
position: absolute;
left : 50%;
top : 50%;
border : 1px solid #666;
width : 400px;
margin-top : -150px;
margin-left: -200px;
padding: 35px 0;
}
par contre j'ai inversé, c'est ca qu'il faut mettre :
.cadre
{
position: absolute;
left : 50%;
top : 50%;
border : 1px solid #666;
width : 400px;
margin-top : -150px;
margin-left: -200px;
padding: 35px 0;
}
cela marche, mais c'est quand même bizarre, car ce n'est pas centrer parfaitement verticalement ! :(
Et juste, pourriez vous m'expliquez à quoi sert ce que vous m'avez dis ? car je ne comprend pas certaines choses... :)
Et juste, pourriez vous m'expliquez à quoi sert ce que vous m'avez dis ? car je ne comprend pas certaines choses... :)
Personne ? :/
Salut
Premièrement, il serait cool de ne pas relancer ta demande toute les 20 minutes, une relance est permise par tranche de 24h sans réponse. ;-)
Ensuite, on ne va pas t'apprendre tout le CSS ici, il faut essayer, tester, se planter, réessayer, prendre des notes, etc.
Tu peut aussi t'aider d'internet, avec des tutoriels, des sites références et des exemples de codes.
Souvent, une recherche google permet de répondre à une question ou un problème dans le projet.
Premièrement, il serait cool de ne pas relancer ta demande toute les 20 minutes, une relance est permise par tranche de 24h sans réponse. ;-)
Ensuite, on ne va pas t'apprendre tout le CSS ici, il faut essayer, tester, se planter, réessayer, prendre des notes, etc.
Tu peut aussi t'aider d'internet, avec des tutoriels, des sites références et des exemples de codes.
Souvent, une recherche google permet de répondre à une question ou un problème dans le projet.
Exc moi et merci quand meme ;)
Pas de soucis, il faut bien apprendre la charte du forum à un moment ou à un autre quand on est nouveau. :-)
Sinon, en bons sites à bookmarker pour apprendre à développer un site :
https://www.alsacreations.com/
https://www.w3schools.com/
https://openclassrooms.com/fr/
https://web.developpez.com/
Et pas de secret, pour progresser, il faut pratiquer et lire de la doc sur le sujet. ;-)
Sinon, en bons sites à bookmarker pour apprendre à développer un site :
https://www.alsacreations.com/
https://www.w3schools.com/
https://openclassrooms.com/fr/
https://web.developpez.com/
Et pas de secret, pour progresser, il faut pratiquer et lire de la doc sur le sujet. ;-)
