Alignement vertical ET horizontal

noerubiks -  
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

Résumé de la discussion

Le fil porte sur l’alignement simultané vertical et horizontal d’un bloc dans une page HTML/CSS, une question centrale pour les débutants souhaitant maîtriser le centering sur iPhone/Safari. Several réponses proposent des techniques variées, notamment vertical-align: middle pour l’alignement, ou bien position: absolute avec left: 50% et top: 50% accompagnés de marges négatives, tout comme l’usage de padding pour ajuster l’espace. Certains évoquent des démonstrations et des outils de développement, ainsi que des exemples concrets comme le cadre centré par décalages, mais l’adaptation reste sensible selon le contexte et le navigateur utilisé. En cas d’objectif précis, préciser le type de bloc et l’environnement, car les solutions autorisant le centrage différeront entre une mise en page fluide et une structure fixe.

Bobot (l’IA à votre service)
  1. tryan44
    Bonjour,

    Tout dépend de ce que vous voulez faire exactement. Il faudrait être plus explicite.
    1. noerubiks Auteur
      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 ;)
      1. tryan44 
        #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!
        3. noerubiks Auteur
          excellent, merci !
          mais sauriez vous aussi comment aligner seulement horizontalement, ou seulement verticalement, car j'ai encore un peut de mal !
          Merci ! ;)
          1. 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
            1. noerubiks Auteur
              Et encore une dernière question, j'aimerai centrer le contenu de mon bloc, mais je n'y arrive pas. Comment faire ?
              2. noerubiks Auteur
                excuser moi, je voulais dire centrer verticalement ;)
                1. Profil bloqué
                  vertical-align:middle;
                2. Profil bloqué
                  ou alors tu enlèves la hauteur de la div, et tu mets des padding
                  exemple :
                  padding : 20px 0;
              5. noerubiks Auteur
                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;
}
                1. Profil bloqué
                  enlève ton height : 300px;
                  et augment le 20px de cette ligne si besoin
                  padding: 20px 0;
                  1. noerubiks Auteur
                    je n'est pas bien compris ce que tu veux dire par "augment le 20px de cette ligne si besoin" !
                    1. 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;
                      }
                      1. noerubiks Auteur
                        cela me fait un grand espace entre le bas du cadre et le texte !
                        1. 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;
                          }
                          1. noerubiks Auteur
                            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... :)
                            1. noerubiks Auteur
                              Personne ? :/
                              1. Pierrecastor Modérateur
                                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.
                            2. noerubiks Auteur
                              Excuser moi et merci quand meme ;)
                            • 1
                            • 2

                            Discussions similaires

                            Barre verticale droite sur clavier
                            k_lou

                            41 réponses
                            Barre verticale droite sur clavier mac
                            oui

                            1 réponse
                            Comment aligner des éléments html css
                            eligame

                            1 réponse
                            le signe " | " dans excel
                            zed

                            4 réponses
                            Trait vertical: shift +Alt+ L
                            IO

                            2 réponses