Zentrieren Sie eine automatische Breite div?

Question

Ich habe Probleme, weil ich ein div Ich will, muss zum Zentrum und was ich in der Regel gesagt worden ist, dies zu tun:

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

das Problem ist, das ist für, wenn Sie die div sein wollen eine feste Breite. Ich möchte das div seine Größe basierend auf dem Text im div anpassen und immer noch zentriert sein. Ich habe versucht:

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

aber das hat nicht funktioniert. Es dehnt das Div aus, um den Bildschirm zu füllen, wenn ich das tue.

Wer weiß, was hier zu tun ist?

Answer 1

Sie könnten CSS display:table-cell oder display:table

Answer 2

EDITED versuchen wollen:

Verwendung table, könnte es leichter zu frisieren sein. Dann div in die tr

Answer 3

für Elternblock oder Körper hinzufügen - text-align:center; für Centerd-Block 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

diese Struktur Versuchen.

<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

Haben Sie den hier gezeigten Ansatz ausprobiert? http://www.tightcss.com/centering/center_variable_width.htm

grundsätzlich. setzen Ihre Inhalte in einem schwebenden div setzen, die innerhalb eines anderen schwamm div schwammen div

put links: 50%, bezogen auf den äußeren Position div put links: -50%, bezogen auf den inneren Position div

schließlich , Nest alles mit Überlauf in einem mehr div: versteckt

.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; 
} 

hier ist meine jsfiddle Demonstration: http://jsfiddle.net/wbhyX/1/

Answer 6

.Outer-Container { Position: relativ; links: 50%; Schwimmer: links; klar: beide; Rand: 10px 0; Textausrichtung: links; }

.inner-container { hintergrund: rot; Position: relativ; links: -50%; Textausrichtung: links; }

Answer 7

Die horizontale Ausrichtung eines Elements kann ein wenig merkwürdig werden, da die Funktionalität nicht sehr intuitiv ist.Wirklich, Sie müssen Spiele mit text-align:center; und margin:auto, spielen und Sie müssen wissen, wann man welche verwendet.

Zum Beispiel, wenn ich den Inhalt eines Elements (Raw-Text), einschließlich Schaltflächen und Eingaben, zentrieren möchte, kann ich verwenden.

.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>

Wenn wir andere Elemente zu unserem Container hinzufügen, werden diese Elemente ihre Breite auf 100% gezwungen haben. Dies hilft uns zu emulieren, dass es zentriert ist, weil es technisch zu 100% zentriert ist! Dumm, nicht wahr?

.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>

Wenn Ihre Eigenschaft width wenn definiert ist, dann können Sie den margin: auto Stil es innerhalb der Eltern-Center.

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

Sie benötigen, ist am besten für Sie, welche Lösung zu bestimmen. Ich wünschte, ich könnte mehr helfen, aber es ist schwer zu wissen, welche Lösung am besten zu Ihren Bedürfnissen passt, wenn Sie das HTML-Problem nicht gelöst haben!

Wie auch immer, ich hoffe this JSFiddle hilft, Dinge zu klären!

Answer 8

Verwendung margin: 0px auto; and display: table; Es gibt Beispiel: https://jsfiddle.net/da8p4zdr/