Comment aligner horizontalement dans css divs

Il Float

• La propriété CSS float décale votre div vers la gauche ou vers la droite, et permet au texte et d'autres éléments à l'écoulement autour d'elle. Créer une rangée horizontale de divs en définissant la propriété de chaque flotteur avec la valeur de «gauche» ou «droite». De longues rangées de divs flottants seront enrouler autour, la création de plusieurs lignes. Les divs dans cet exemple la ligne dans une rangée "1 2 3" contre le côté gauche de la page.

  1
  
  
  2
  
  
  3

  Le divs dans cet exemple la ligne dans une rangée de «3 2 1" contre le côté droit de la page.

  1
  
  
  2
  
  
  3
  
  
  
  
  

  Insérez "
  "Pour éteindre la propriété float.

L'afficher comme un bloc d'Inline

• Le contraire de bloc est "en ligne". Éléments de ligne sont aussi large car ils ont besoin d'être, qui coule avec le texte et d'autres éléments en ligne sans sauts de ligne. La propriété "inline-block" affichage CSS assure un équilibre entre les deux. Styling vos divs avec affichage inline-block provoque vos divs de couler comme du texte, tout en conservant la capacité à l'échelle automatiquement et vous permettent de définir la taille, la frontière et d'autres propriétés de style. Cet exemple aligne les divs "1 2 3" contre le côté gauche de la page.

  1
  
  
  2
  
  
  3

Faire une grille de table de style

• Avant de CSS et la balise div, page web mise en page a été souvent accompli en utilisant des tables. Tout en utilisant des tables pour la mise en page est plus la meilleure pratique, la propriété CSS display offre un comportement de table de style. Utilisez divs imbriqués pour créer une grille, définissant la propriété d'affichage à "table", "table-row» ou «table-cell" de causer chaque div à se comporter de manière appropriée. Les divs seront automatiquement aligner et l'échelle, tout comme des cellules de tableau. Ce qui suit est une simple grille deux par deux, où "R #: C #" se réfère à la ligne et la colonne de chaque cellule de la grille.

  
  

  R1: C1
  
  R1: C2

  
  
  

  R2: C1
  
  R2: C2

  
  

Conseils d'alignement

• Maintenant que vos divs sont alignés comme des canards dans une rangée (ou grille), vous pouvez trouver le contenu intérieur de votre besoins div peaufinage. Images, textes et autres éléments contenus dans votre div ne peuvent pas être alignés comme vous le souhaitez. La propriété CSS text-align travaillera pour définir l'alignement horizontal de la plupart des contenus dans votre div. En utilisant les méthodes de flotter ou inline-block peut nécessiter l'utilisation divs imbriqués et le positionnement absolu d'exposer votre contenu exactement comme vous le souhaitez. L'approche d'affichage de table de style vous donne plus de contrôle sur l'alignement. Utilisez le CSS de la propriété vertical-align sur votre div style table-cell de changer l'alignement de fond par défaut.