Maison > interface Web > tutoriel CSS > Comment centrer une couche DIV avec CSS_CSS/HTML

Comment centrer une couche DIV avec CSS_CSS/HTML

WBOY
Libérer: 2016-05-16 12:11:16
original
1703 Les gens l'ont consulté

Comment centrer un DIV
Les principales définitions de style sont les suivantes :

corps {TEXT-ALIGN : center;}
#center { MARGIN-RIGHT : auto ; MARGIN-LEFT : auto }
Description :

Définissez d'abord TEXT-ALIGN : center dans l'élément parent ; cela signifie que le contenu de l'élément parent est centré pour IE, ce paramètre est suffisant. Mais il ne peut pas être centré sur Mozilla. La solution consiste à ajouter "MARGIN-RIGHT: auto;MARGIN-LEFT: auto;" lors de la définition de l'élément enfant

Il est à noter que si vous souhaitez utiliser cette méthode pour centrer la page entière, il est recommandé de ne pas la mettre dans un DIV. Vous pouvez diviser plusieurs divs en séquence, à condition de définir MARGIN-RIGHT dans. chaque division div : auto;MARGIN-LEFT: auto fera l'affaire.

Comment centrer verticalement l'image dans un DIV
Utilisez la méthode d'arrière-plan. Exemple :

body{BACKGROUND : url(http://www.w3cn.org/style/001/logo_w3cn_194x79.gif) #FFF centre sans répétition ;}
La clé est le centre final , Ce paramètre définit la position de l'image. Vous pouvez également écrire « en haut à gauche » (coin supérieur gauche) ou « en bas à droite », etc. Vous pouvez également écrire directement la valeur « 50 30 »

L'effet est le suivant :

Comment centrer verticalement le texte dans un DIV
S'il s'agit de texte, vous ne pouvez pas utiliser la méthode d'arrière-plan. Vous pouvez utiliser la méthode d'augmentation de l'interligne pour obtenir un centrage vertical. 🎜>





contenu du test




Description :

vertical-align:middle; signifie un centrage vertical dans la ligne. Nous augmentons l'espacement des lignes à la même hauteur que la hauteur de la ligne DIV entière : 200 px, puis insérons le texte et il sera centré verticalement.


source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal