Centrer un div automatique?

Question

Je vais avoir du mal parce que j'ai un div Je veux centrer et ce que j'ai été dit habituellement à faire est la suivante:

width: 700px; 
margin-left: auto; 
margin-right: auto; 

le problème est, ceci est pour si vous voulez que le div être une largeur fixe. Je veux que le div ajuste sa taille en fonction du texte dans la div, et reste centré. J'ai essayé:

width: auto; 
margin-left: auto; 
margin-right: auto; 

mais cela n'a pas fonctionné. Il étire le div pour remplir l'écran quand je fais cela.

Quelqu'un sait quoi faire ici?

Answer 1

Vous pourriez vouloir essayer CSS display:table-cell ou display:table

Answer 2

ÉDITÉ:

utilisation table, il pourrait être plus facile à coiffer. Puis ajouter div dans le tr

Answer 3

pour le bloc parent ou le corps - text-align:center; pour le bloc centerd: display:inline-block;

.center{display:inline-block;background:red} 
body{text-align:center} 

<div class="center"> 
    <p contenteditable="true">write text</p> 
</div> 

DEMO http://jsfiddle.net/RXP4F/

Content Editable MDN

Answer 4

Essayez cette structure.

<div class="container"> 
    <div class="center_div"> 

    </div> 
</div> 



.container{ 
    float: left; 
    left: 50%; 
    position: relative; 
} 
.center_div{ 
    position: relative; 
    left: -50%; 
    float: left; 
} 

Answer 5

Avez-vous essayé l'approche montrée ici? http://www.tightcss.com/centering/center_variable_width.htm

fondamentalement. mettre votre contenu dans une div flotta vente qui flottaient dans une autre div div flottaient

mis à gauche: 50%, position relative sur div extérieure mis à gauche: -50%, la position relative sur div intérieure

enfin , tout nid dans un autre div avec overflow: hidden

.outermost-div{ 
    background-color: blue; 
    overflow:hidden;  
} 

.inner-div{ 
    float:left; 
    left:50%; 
    background-color: yellow; 
    position: relative; 
} 

.centerthisdiv { 
    position:relative; 
    left: -50%; 
    background-color: green; 
    float:right; 
    width:auto; 
} 

voici ma démonstration jsFiddle: http://jsfiddle.net/wbhyX/1/

Answer 6

.outer-container { position: relative; gauche: 50%; flotteur: gauche; clair: les deux; marge: 10px 0; text-align: à gauche; }

.supplément-conteneur { arrière-plan: rouge; position: relative; gauche: -50%; text-align: à gauche; }

Answer 7

Centrer un élément horizontalement peut devenir un peu bizarre, car la fonctionnalité n'est pas très intuitive.Vraiment, vous devez jouer à des jeux avec text-align:center; et margin:auto, et vous aurez besoin de savoir quand l'utiliser. Par exemple, si je veux centrer le contenu d'un élément (texte brut), y compris les boutons et les entrées, je peux utiliser text-align:center.

.text-center { 
 
    text-align:center; 
 
}

<div class="text-center" style="border:1px dashed blue;padding:6px;" > 
 
    My contents are centered! That includes my <input placeholder="inputs" /> and my <button>buttons.</button> 
 
</div>

Si l'on ajoute d'autres éléments à notre conteneur, ces éléments auront leur largeur forcée à 100%. Cela nous aide à émuler que c'est centré car techniquement, à 100%, c'est centré! Idiot, n'est-ce pas?

.text-center { 
 
    text-align:center; 
 
}

<div class="text-center" style="border:1px dashed blue;padding:6px;" > 
 
    My contents are centered! That includes my <input placeholder="inputs" /> and my <button>buttons.</button> 
 
    <p style="background-color:orange;width:auto" >Even though my width is explicitly defined as "auto," I still have 100% width! What gives?!</p> 
 
</div>

Si votre propriété est définie largeur bien, vous pouvez utiliser le style margin: auto à centrer au sein de la société mère.

<div style="margin:auto;border:1px solid black;width:300px;" > 
 
    I am centered! 
 
</div>

Vous devez déterminer quelle est la meilleure solution pour vous. J'aimerais pouvoir vous aider davantage, mais il est difficile de savoir quelle solution répondra le mieux à vos besoins si vous n'avez pas fourni le code HTML pour vous!

Dans les deux cas, j'espère que this JSFiddle aidera à éclaircir les choses!

Answer 8

Utilisation margin: 0px auto; and display: table; Il y a par exemple: https://jsfiddle.net/da8p4zdr/