Comment faire un alignement du centre div en HTML

Possible en double:
How to center a div in a div?Comment faire un alignement du centre div en HTML

Une façon simple de faire un objet centré en HTML utilise align='center', mais il ne fonctionne pas pour une div.

J'ai essayé:

style='text-align:center'; 
style='left:50%';

I vrai même une étiquette de centre

<center>

Mais je ne peux pas faire mon div cible à centre.

Source

2010-04-22 Mac Taylor

Essayez-vous de centrer le div lui-même, ou le texte dans le div? – Welbog

J'ai dit dans ma question un div pas son texte. merci –

Définir une largeur pour le 'div', puis utiliser' marge: 0 auto; ': http://jsfiddle.net/spikey/FLL5Z/ – uSeRnAmEhAhAhAhAhA

<!DOCTYPE html> 
 
<html> 
 
    <head> 
 
    <title>Center</title> 
 
    </head> 
 
    <body> 
 

 
    <div style="text-align: center;"> 
 
     <div style="width: 500px; margin: 0 auto; background: #000; color: #fff;">This DIV is centered</div> 
 
    </div> 
 

 
    </body> 
 
</html>

a été testée et a travaillé dans IE, Firefox, Chrome, Safari et Opera. Je n'ai pas testé IE6. Le text-align externe est nécessaire pour IE. D'autres navigateurs (et IE9?) Fonctionneront quand vous donnez la valeur DIV (gauche et droite) de l'auto. Marge "0 auto" est un raccourci pour la marge "0 auto 0 auto" (en haut à droite en bas à gauche).

Remarque: le texte est également centré à l'intérieur de la DIV interne, si vous voulez qu'il reste sur le côté gauche, spécifiez text-align: left; pour la DIV intérieure. Edit: IE 6, 7, 8 et 9 fonctionnant en mode Standards fonctionnera avec les marges définies sur auto.

Source

2010-04-22 13:28:01 Tower

Je dois définir avec mon pourcentage div non fixé pixel, je pense que si je fixe la largeur à 95%, il ne serait pas centre –

comment savez-vous que son div est en position relative ou statique? – meo

@Mac: cette technique fonctionne très bien pour un pourcentage de largeur. Cependant, en général, pour que la marge automatique fonctionne, vous devez être en mode Standards, pour lequel vous aurez besoin d'une déclaration ' bobince

-1

que diriez-vous quelque chose le long de ces lignes

<style type="text/css"> 
    #container { 
    margin: 0 auto; 
    text-align: center; /* for IE */ 
    } 

    #yourdiv { 
    width: 400px; 
    border: 1px solid #000; 
    } 
</style> 

.... 

<div id="container"> 
    <div id="yourdiv"> 
    weee 
    </div> 
</div>

Source

2010-04-22 13:29:31 espais

Cela ne fonctionnera pas sur d'autres navigateurs ou en mode Standards, car les marges automatiques doivent être sur le même élément que la largeur. – bobince

cela fonctionne bien pour moi dans les modes autres que Quirks, je ne comprends pas le down-vote constante – espais

Je pense que le la align="center" aligne le contenu, donc si vous vouliez utiliser cette méthode, vous devez l'utiliser dans un « wraper » div - un div qui enveloppe juste le reste.

text-align fait une sorte de chose similaire.

left:50%left:50% est ignoré à moins que vous ne définissiez la position div comme étant relative ou absolue.

Les méthodes généralement acceptées est d'utiliser les propriétés suivantes

width:500px; // this can be what ever unit you want, you just have to define it 
margin-left:auto; 
margin-right:auto;

les marges étant auto signifie qu'ils poussent/rétrécir pour correspondre à la fenêtre de navigateur (ou div parent)

UPDATE

Merci à Meo pour cela, si vous le vouliez, vous pouviez gagner du temps et utiliser la petite main pour la marge.

margin:0 auto;

ce qui définit le haut et le bas 0 (car il est égal à zéro, il n'a pas d'importance sur le manque d'unités) et de la gauche et la droite se définit comme « auto » Vous pouvez alors, si vous wan't override dites la marge supérieure comme vous le feriez avec d'autres règles CSS.

Source

2010-04-22 13:32:32 thecoshman

vous pouvez utiliser des styles en ligne pour la marge .. margin: 0 auto; – meo

problème est IE qui ne peut pas montrer div exactement centré; J'ai essayé marge-gauche-droite: auto mais pas travaillé sur IE –

@meo Un bon point. Habituellement, il serait préférable de prendre vos conseils, car il permet de réduire la taille du fichier, pas beaucoup, je sais, mais chaque petit aide. Bien que pour le guide, il aide à expliquer les propriétés «requises» pour le faire fonctionner. – thecoshman

cela dépend si votre div est en position: absolute/fixe ou d'un parent/statique

pour la position: & absolue fixe

<div style="position: absolute; /*or fixed*/; width: 50%; height: 300px; left: 50%; top:100px; margin: 0 0 0 -25%">blblablbalba</div>

L'astuce ici est d'avoir une marge négative la moitié de la largeur l'objet

de position: relative statique &

<div style="position: relative; /*or static*/; width: 50%; height: 300px; margin: 0 auto">blblablbalba</div>

pour les deux techniques, il est impératif de définir de largeur

Source

2010-04-22 13:34:59 meo

Comment faire un alignement du centre div en HTML

Répondre

Questions connexes