Comment faire un centre div flottant

En utilisant la propriété CSS float ajoute une quantité importante de la flexibilité à la conception d'un site web. La conception de base de CSS DIV-est devenu le standard de l'industrie, mais la hausse de la conception CSS a également frustré nombreux webdesigners. Sous les anciennes méthodes de conception basées sur des tables, DIV centrage était simple, mais la même tâche présente des problèmes découlant d'un système de conception de CSS. Une des façons les plus faciles pour accomplir cette tâche est par l'utilisation de la propriété float. Cependant, puisque les seules valeurs valides pour la propriété float sont à gauche et à droite, faire un flotteur de DIV au centre nécessite un niveau de créativité.


Sommaire

Instructions

  1. Créer une feuille de style à utiliser pour la page en question.

  2. Définir un nouveau type de classe pour la DIV qui seront flottaient au centre. Donnez ce flotteur de classe et les propriétés de largeur.

  3. Réglez la valeur de la propriété de flotteur "gauche" et la valeur de la propriété largeur à la largeur dont vous avez besoin pour répondre à vos besoins particuliers. Notez que vous devez définir la valeur de la propriété largeur qu'un pour cent de la largeur totale de l'élément contenant plutôt que comme une valeur absolue.

  4. Définir un type de deuxième classe. Les DIV en utilisant cette classe seront toujours afficher à l'extrême gauche de votre page et va pousser la première classe de DIV au centre de la page. Donnez ce flotteur de classe, propriétés de largeur et de hauteur.

  5. Réglez la valeur de la propriété de flotteur "gauche" et la valeur de la propriété de la hauteur à un petit quelque chose comme "1px" ou "1%." Calculer la valeur de la propriété largeur en soustrayant la valeur de la propriété largeur de votre type de 100 pour cent de première classe et en le divisant par deux. Par exemple, si la valeur de la propriété largeur de votre premier type de classe est de 30 pour cent, la valeur de la propriété largeur pour cette classe serait de 100 pour cent - 30 pour cent 70 pour cent = / 2 = 35 pour cent.

  6. Sauvegardez votre feuille de style comme un simple fichier texte et lui donner un "Css" l'extension.

  7. Téléchargez votre feuille de style pour le serveur qui héberge votre page web.

  8. Liez votre feuille de style à votre page web. Ceci est accompli par l'ajout d'une balise LINK à la section HEAD de votre page. La balise LINK devrait se lire comme suit: (Où votre feuille de style est nommé "your_style_sheet.css"). Si vous avez placé votre feuille de style dans un répertoire autre que celui où votre page web est, vous devez désigner l'emplacement exact de la propriété HREF de la balise LINK.

  9. Insérez un DIV dans votre page Web qui utilise le type de deuxième classe définie dans votre feuille de style. Immédiatement après, insérer un DIV qui utilise le type de première classe définie dans votre feuille de style. Cette DIV sera flottait au centre.




Conseils & Avertissements








  • Une option alternative à la création d'une feuille de style est de mettre une déclaration de style dans la section HEAD de votre page web. Une déclaration de style commence par une étiquette. Placez le code CSS nécessaire entre ces deux balises et retirer la balise LINK vous avez inséré dans la section HEAD de votre page web.
» » » » Comment faire un centre div flottant