Alignement vertical ET horizontal

noerubiks Messages postés 174 Statut Membre -  
Pierrecastor Messages postés 10830 Date d'inscription   Statut Modérateur Dernière intervention   -
Bonjour,

Je débute en html et css depuis un bon moment, et j'aimerai savoir comment aligner verticalement ET horizontalement un bloc dans une page.
Merci d'avance ! ;)

22 réponses

  • 1
  • 2
  1. tryan44 Messages postés 1289 Date d'inscription   Statut Membre Dernière intervention   220
     
    Bonjour,

    Tout dépend de ce que vous voulez faire exactement. Il faudrait être plus explicite.
    0
  2. noerubiks Messages postés 174 Statut Membre 37
     
    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 ;)
    0
  3. tryan44 Messages postés 1289 Date d'inscription   Statut Membre Dernière intervention   220
     
    #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!
    0
  4. Profil bloqué
     
    je rejoins tyran
    mais ne pas oublié le
    position:absolute;
    0

  5. Vous n’avez pas trouvé la réponse que vous recherchez ?

    Posez votre question
  6. noerubiks Messages postés 174 Statut Membre 37
     
    excellent, merci !
    mais sauriez vous aussi comment aligner seulement horizontalement, ou seulement verticalement, car j'ai encore un peut de mal !
    Merci ! ;)
    0
  7. Profil bloqué
     
    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
    0
  8. noerubiks Messages postés 174 Statut Membre 37
     
    Et encore une dernière question, j'aimerai centrer le contenu de mon bloc, mais je n'y arrive pas. Comment faire ?
    0
  9. Profil bloqué
     
    ajoute un :
    text-align:center;
    0
  10. noerubiks Messages postés 174 Statut Membre 37
     
    excuser moi, je voulais dire centrer verticalement ;)
    0
    1. Profil bloqué
       
      vertical-align:middle;
      0
    2. Profil bloqué
       
      ou alors tu enlèves la hauteur de la div, et tu mets des padding
      exemple :
      padding : 20px 0;
      0
  11. noerubiks Messages postés 174 Statut Membre 37
     
    je ne sais pas pourquoi, mais sa ne marche toujours pas :(
    0
  12. Profil bloqué
     
    tu peux copier / coller ton code HTML ET CSS stp ?
    0
  13. noerubiks Messages postés 174 Statut Membre 37
     
    oui !
    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;
}
    0
  14. Profil bloqué
     
    enlève ton height : 300px;
    et augment le 20px de cette ligne si besoin
    padding: 20px 0;
    0
  15. noerubiks Messages postés 174 Statut Membre 37
     
    je n'est pas bien compris ce que tu veux dire par "augment le 20px de cette ligne si besoin" !
    0
  16. Profil bloqué
     
    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;
    }
    0
  17. noerubiks Messages postés 174 Statut Membre 37
     
    cela me fait un grand espace entre le bas du cadre et le texte !
    0
  18. Profil bloqué
     
    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;
    }
    0
  19. noerubiks Messages postés 174 Statut Membre 37
     
    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... :)
    0
  20. noerubiks Messages postés 174 Statut Membre 37
     
    Personne ? :/
    0
    1. Pierrecastor Messages postés 10830 Date d'inscription   Statut Modérateur Dernière intervention   4 215
       
      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.
      0
  21. noerubiks Messages postés 174 Statut Membre 37
     
    Excuser moi et merci quand meme ;)
    0
    1. Pierrecastor Messages postés 10830 Date d'inscription   Statut Modérateur Dernière intervention   4 215
       
      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. ;-)
      0
  • 1
  • 2

Discussions similaires

Barre verticale droite sur clavier
k_lou -
Leuide -

41 réponses
Barre verticale droite sur clavier mac
oui -
jeanbern -

1 réponse
Trait vertical: shift +Alt+ L
IO -
Aliboron Martin -

2 réponses
le signe " | " dans excel
zed -
Utilisateur anonyme -

4 réponses
Problème écran tv Samsung bandes verticales
Guig07 -
txiki -

4 réponses