CSS, zentriertes Div, schrumpfen, um zu passen?

Folgendes möchte ich:

text text text text text text text text text text text
text text text text text text text text text text text
                   +-----------+
                   | some text |
                   +-----------+
text text text text text text text text text text text
text text text text text text text text text text text

... wo der Block "irgendein Text" ein div ist. Ich möchte, dass das div die minimale Breite hat, die erforderlich ist, um seinen Text ohne Umbruch zu enthalten. Wenn der Text zu lang ist, um ohne Umbruch zu passen, ist es in Ordnung, wenn er umbrochen wird.

Ich möchte KEINE explizite Breite für das div festlegen. Ich möchte auch keine minimale oder maximale Breite einstellen. Wie ich schon sagte, wenn es zu viel Text gibt, um ihn in einer Zeile ohne Umbruch zu enthalten, ist es in Ordnung, wenn er umbrochen wird.

DIV-Elemente sind standardmäßig auf Blockebene, dh sie erhalten automatisch eine Breite von 100%. Um dies zu ändern, verwenden Sie dieses CSS ...

.centerBox {
  display:inline-block;
  text-align:center;
}


<div class="centerBox">
  Some text
</div>

BEARBEITEN : Aktualisiert, um eine CSS-Klasse anstelle eines Inline-Attributs zu verwenden, und "Block" in "Inline-Block" geändert.

Requisiten an Josh Stodola, obwohl er nicht genau richtig war. Die benötigte Eigenschaft ist:

display: inline-block;

Welches hat mein Problem gelöst. Yay!

Ich weiß nicht, die Lösungen hier scheinen teilweise richtig zu sein, aber dann funktionieren sie nicht wirklich. Basierend auf der Antwort von Josh Stodola ist hier eine browserübergreifende Lösung, die in Firefox, Safari, Chrome und IE 7, 8 und 9 getestet wurde

CSS:

body {
    text-align: center;
}

#centered-div {
    text-align: left;
    background: #eee;

    display: inline-block;

    /* IE7 bs - enables inline-block for div-elements*/
    *display: inline;
    zoom: 1;
}

Markup:

<div id="centered-div">
    Cum sociis natoque penatibus et magnis dis<br />
    parturient montes, nascetur ridiculus mus.
</div>

Um IE6-Unterstützung hinzuzufügen (seufz), fügen Sie _height: [yourvalue]dem div hinzu. Ja, mit einem Unterstrich.

Testen Sie es selbst auf JSFiddle: http://jsfiddle.net/atp4B/2/

<style type="text/css">
    /* online this CSS property is needed */
    p.block {
        text-align: center;
    }
    /* this is optional */
    p.block cite {
        border: solid 1px Red;
        padding: 5px;
    }    
</style>

<p>Some text above</p>
<p class="block"><cite>some text</cite></p>
<p>Some text below</p>

Hinweis : Verwenden Sie keine DIVs für Textblöcke (für SEO und bessere semantische Zwecke).

Hier ist ein Beispiel, das ich genau für das gemacht habe, wonach Sie suchen:
(jsFiddled here: http://jsfiddle.net/yohphomu/ )

Warnung:

Ich bin ein CSS-Fanatiker !!!

Wenn ich Ihre Frage richtig verstehe, müssen Sie keine Höhe oder Breite festlegen, da die Standardeinstellung auto ist (Sie können jedoch auto verwenden). Das einzige Problem dabei ist jedoch, dass Sie den Hintergrund ändern oder setzen möchten Ein Rand wird es um mehr als das gewünschte Feld machen. Warum ist das so und wie beheben wir es? Lesen Sie weiter.

Oder kopieren und studieren Sie einfach das Beispiel.

Jeder, der dieses Problem hat, hat nichts bemerkt (vorausgesetzt, Sie haben dieses Problem und verwenden divs). Alles zwischen div-Tags wird (zum Verständnis) als vollständiger Satz betrachtet, was bedeutet, dass in diesem div alles enthalten ist, was Sie wollen stehen für (Computer tun, was ihnen gesagt wurde, nicht was sie tun sollen). Um (zum Beispiel) die Textausrichtung so zu zentrieren, dass sie zentriert ist, wird der gesamte Zeilenraum benötigt und (letztendlich) wenn sie einen Rand hat. es würde den gesamten Raum begrenzen, den es benutzte. Wenn Sie dies verstehen, lesen Sie weiter, wenn nicht gut, können Sie dort nicht helfen.

Nun, da wir verstehen, was passiert, wie können wir das beheben? Nun, wir brauchen einen Teil, um ihn zu zentrieren, den anderen, um ihn zu färben. In meinem Beispiel habe ich ein div verwendet, um es zu zentrieren und um zu färben. Habe ich das div gebraucht? Ich bin mir sicher, dass ich es nicht getan habe. Ich hätte das Gleiche erreichen können, indem ich das p zum Zentrieren verwendet hätte (oder ich könnte das p loswerden und einfach div verwenden). Der Grund, warum ich das getan habe, war, es organisiert zu halten.

Eigentlich nur, weil ich es nicht merkte, bis ich darüber nachdachte, aber keine Lust hatte, es zu reparieren.

Hoffe das hat deine Frage beantwortet. Du hast 4 Jahre gebraucht, um eine Antwort zu bekommen, aber ich, 30 Minuten, um es herauszufinden (und ich studiere jetzt seit ein paar Tagen CSS).

Das Beispiel:

<div class='container'>
    <div class="text">
        text text text text text text text text text text text
text text text text text text text text text text text text text text text text text
    </div>
    <div class="holder">
        <p><span>text here</span></p>
    </div>
    <div>
        text text text text text text text text text text text
text text text text text text text text text text text text text text text text text
    </div>
    </div>

Dann würde CSS aussehen wie:

.container {
width: 500px;
height: 500px;
}
.text {
    font-size: 20px;
}
.holder {
text-align: center;


}
span {
background-color: blue;
    border: 1px solid black;
}

Hinweis: Ich habe den Container mit der festgelegten Breite und Höhe festgelegt, da ich gleichzeitig an einem Projekt gearbeitet habe und einen Vollbildmodus mit Text simuliert habe.

Beachten Sie auch, dass ich es so gemacht habe, dass der Text eine separate Hintergrundfarbe mit einem Rand hat. Ich habe dies getan, um zu zeigen, dass die Messungen unabhängig sind und bei Bedarf neu skaliert werden.

Gern geschehen, auch ich denke, die Leute haben Ihre Frage nicht verstanden. Hoffe ich habe es getan.

Ich empfehle Flexbox ! Sehen Sie, was auf dieser Website möglich ist, die von flexbox gelöst wird .

Es ist ziemlich neu, funktioniert aber in allen gängigen modernen Browsern (IE10 verwendet -ms-Präfix, IE11 +, Firefox 31+, Chrome 31+, Safari 7+, ...) - siehe diese Tabelle .

Grundsätzlich kann die vertikale und horizontale Zentrierung mit dynamischer Dimensionierung in 4 Anweisungen erfolgen:

parent {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}

Stellen Sie sicher, dass dieses Elternteil tatsächlich 100% groß ist. Sie können festlegen müssen bodyund htmlauch zu 100% Höhe.

Meine Umsetzung ist auf meiner persönlichen Website unter http://pgmann.cf zu sehen .

Etwas wie das?

<html>
<head>
</head>
<body style="text-align: center;">

   <div style="width: 500px; margin: 0 auto;">

       <p>text text text text text text text text text text text text text text text text text text text text text text</p>

       <div>hello</div>

       <p>text text text text text text text text text text text text text text text text text text text text text text</p>

   </div>


</body>

<style>
p.one
{
border-style:solid;
border-width:2px;
border-color:red;
display:inline-block;
}
</style>

<p class="one">some text</p>

HTML

<div class="outerdiv">
<div class="innerdiv">
++++TEXT+++
</div>
</div>

CSS

.outerdiv{
text-align: center;
}
.innerdiv{
display: inline-block;
}