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. noerubiks Auteur
    J'avais aussi constaté que le rendu n'etait pas terrible.... Donc en gros je dois installer un outil de développement ? :) y'en a t'il pour Safari ?
    1. Pierrecastor Modérateur
      Je connais trois principaux outils de développement, celui intégré à chrome, celui intégré à firefox et firebug pour firefox.

      Et dans tout les cas, il faut que tu installes ces navigateurs pour tester le rendue dessus, avec en plus opera et Internet explorer 7, 8 et 9.
  2. noerubiks Auteur
    Ré-bonjour ;)
    J'ai voulus tester une solution plus simple pour aligner horizontalement et verticalement: 

    .test
{
position: absolute;
Top: 50%;
Left: 50%;
}

    Mais cela n'aligne pas correctement: pourquoi ?

    Merci ! :)
    1. Pierrecastor Modérateur
      Tu utilise des outils d'analyse ? Comme l'examinateur d'élément sous firefox ? Firebug ? Les outils de développement de chrome ?
    2. noerubiks Auteur
      Nn, pour l'instant j'utilise la version d'évaluation de Dreamweaver sur Mac ! Et Safari sans aucun "outils d'analyse" !
    3. Pierrecastor Modérateur
      Et bien il va vite falloir changer de manière de travailler. ;-p

      Dreamweaver peu être pratique, mais ne te fi jamais au rendu afficher. Toujours tester le rendu de ses pages dans plusieurs navigateurs (firefox, safari, chrome, opera, IE7 à 9).

      Et perso, si tu veut vraiment apprendre, je conseillerait plus un éditeur de texte avancer comme notepade++

      Et utiliser des outils de développements pour s'aider à comprendre comment tes pages sont organiser. L'outil de développement inclue dans chrome est vraiment bien fichue, même si celui de firefox et firebug sont pas mal non plus.
  3. noerubiks Auteur
    Excuser moi et merci quand meme ;)
  4. 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.
  6. 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. 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 me fait un grand espace entre le bas du cadre et le texte !
        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
            je n'est pas bien compris ce que tu veux dire par "augment le 20px de cette ligne si besoin" !
            1. Profil bloqué
              enlève ton height : 300px;
              et augment le 20px de cette ligne si besoin
              padding: 20px 0;
              1. 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;
}
                3. 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
                  Et encore une dernière question, j'aimerai centrer le contenu de mon bloc, mais je n'y arrive pas. Comment faire ?
                  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
                      excellent, merci !
                      mais sauriez vous aussi comment aligner seulement horizontalement, ou seulement verticalement, car j'ai encore un peut de mal !
                      Merci ! ;)
                      2. 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!
                        • 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