web-dev-qa-db-fra.com

Centrer une largeur automatique?

J'ai des problèmes parce que j'ai une div que je veux centrer et ce qu'on me dit habituellement

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

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

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

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

Quelqu'un sait quoi faire ici? 

csswidthalignment
33
Dan K

pour le bloc ou le corps parent - 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/

Contenu modifiable MDN

39
zloctb

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

fondamentalement . placez votre contenu dans un div flotté mettez ce div flottant dans un autre div flotté 

mettre à gauche: 50%, position relative sur div externe mettre à gauche: -50%, position relative sur div interne

enfin, imbriquons tout dans une div de plus avec débordement: 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 de jsfiddle: http://jsfiddle.net/wbhyX/1/

11
shinjin

Utilisez la marge: 0px auto; and display: table; Voici les exemples: https://jsfiddle.net/da8p4zdr/

5
Kale

Vous voudrez peut-être essayer CSS display:table-cell ou display:table

3
Samuel Liew

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;
}
3
Sharath Daniel

la réponse de zloctb le 30 août 2013 à 04h14 fonctionnait en principe mais était incomplète. Si vous voulez que la largeur de votre élément soit 'auto' en fonction de son contenu ET centrée dans son parent MAIS avec le contenu de l'élément CHILD aligné à gauche, procédez comme suit (car c'est le moyen le plus simple):

.parent {
  width: 100%;
  text-align: center;
}

.parent div.child {
  display: inline-block;
  text-align: left;
  width: auto;
}

(Évidemment, si vous vouliez simplement que tout soit strictement centré, vous n’auriez pas besoin du code pour l’élément enfant.)

1
Margaret JB

Édité:

utiliser table, il pourrait être plus facile à coiffer. Ajoutez ensuite div dans la tr

0
Daniel Cheung

Centrer un élément horizontalement peut devenir un peu étrange, car la fonctionnalité n'est pas très intuitive. Vraiment, vous devez jouer à des jeux avec text-align:center; et margin:auto, et vous devez savoir quand utiliser lesquels.

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 nous ajoutons d'autres éléments à notre conteneur, leur largeur sera forcée à 100%. Cela nous aide à émuler le fait qu’il soit centré car techniquement, à 100%, il est centré! Silly, 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é width IS est bien définie, vous pouvez utiliser le style margin: auto pour la centrer sur le parent.

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

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

De toute façon, j'espère ce JSFiddle aide à clarifier les choses!

0
WebWanderer

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

.inner-container { fond: rouge; position: relative; à gauche: -50%; text-align: left; }

0
Kursat Turkay