CSS, div centré, rétrécir pour s'adapter ?

Question

Voilà ce que je veux :

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

...où le bloc "texte" est un div. Je veux que le div ait la largeur minimale nécessaire pour contenir son texte sans l'envelopper. Si le texte est trop long pour tenir sans être enveloppé, il est possible de l'envelopper.

Je ne veux PAS définir une largeur explicite pour la division. Je ne veux pas non plus définir de largeur minimale ou maximale ; comme je l'ai dit, s'il y a trop de texte pour qu'il tienne sur une ligne sans s'enrouler, ce n'est pas grave s'il s'enroule.

Answer 1

Les éléments DIV sont des blocs par défaut, ce qui signifie qu'ils ont automatiquement une largeur de 100 %. Pour changer cela, utilisez cette CSS...

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

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

EDITAR : Mise à jour pour utiliser une classe CSS plutôt qu'un attribut inline et remplacement de "block" par "inline-block".

Answer 2

Je ne sais pas, les solutions proposées ici semblent partiellement correctes, mais elles ne fonctionnent pas vraiment. Sur la base de la réponse de Josh Stodola, voici une solution multi-navigateurs testée dans Firefox, Safari, Chrome et IE 7, 8 et 9.

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>

Pour ajouter le support d'IE6 (soupir), ajoutez _height: [yourvalue] au div. Oui, avec un trait de soulignement.

Testez-le vous-même sur JSFiddle : http://jsfiddle.net/atp4B/2/

Answer 3

Bravo à Josh Stodola, même s'il n'avait pas tout à fait raison. La propriété nécessaire est :

display: inline-block;

Ce qui a résolu mon problème. Hourra !

Answer 4

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

Indice ne pas utiliser de DIV pour les blocs de texte (pour le référencement et une meilleure sémantique).

Answer 5

Voici un exemple que j'ai réalisé et qui correspond exactement à ce que vous recherchez :
(jsFiddled ici : http://jsfiddle.net/yohphomu/ )

Attention :

Je suis un fanatique de CSS ! !!

Si je comprends bien votre question, il n'est pas nécessaire de définir une hauteur ou une largeur car leur paramètre par défaut est auto (ceci dit, vous pouvez utiliser auto), mais le seul problème est que si vous souhaitez modifier l'arrière-plan ou mettre une bordure, le champ sera plus grand que le champ souhaité. Pourquoi cela et comment y remédier, lisez la suite.

Ou bien copiez et étudiez l'exemple.

Tous ceux qui ont ce problème n'ont pas réalisé une chose (en supposant que vous avez ce problème et que vous utilisez des div's) : tout ce qui se trouve entre des balises div est considéré (pour des raisons de compréhension) comme un ensemble complet, ce qui signifie que dans cette div se trouvent toutes les choses que vous voulez qu'elle représente (les ordinateurs font ce qu'on leur dit, pas ce que vous voulez qu'ils fassent) donc (par exemple) pour mettre le text-align au centre, elle a besoin de tout l'espace de la ligne et (finalement) si elle avait une bordure, elle borderait tout l'espace qu'elle utilise. Si vous comprenez cela, continuez à lire, sinon je ne peux pas vous aider.

Maintenant que nous comprenons ce qui se passe, comment le réparer ? Eh bien nous avons besoin d'une partie pour le centrer, l'autre pour le colorer. Dans mon exemple, j'ai utilisé un div pour le centrer et un span pour le colorer. Avais-je besoin du div ? Je suis sûr que non. J'aurais pu obtenir la même chose en utilisant le p pour le centrer (ou je pouvais me débarrasser du p et utiliser simplement le div). La raison pour laquelle j'ai fait cela était de garder l'organisation.

En fait, c'est juste parce que je n'ai pas réalisé avant d'y penser, mais je n'avais pas envie de le réparer.

J'espère avoir répondu à votre question. Il vous a fallu 4 ans pour trouver la réponse, mais moi, 30 minutes pour la comprendre (et j'étudie les CSS depuis quelques jours maintenant).

L'exemple :

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

Alors le css ressemblerait à :

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

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

Avis : J'ai défini le conteneur avec une largeur et une hauteur définies parce que je travaillais sur un projet en même temps et pour simuler un plein écran avec du texte.

Notez également que j'ai fait en sorte que le texte ait une couleur de fond distincte avec une bordure. Je l'ai fait pour montrer que ses mesures sont indépendantes et qu'il peut être redimensionné si nécessaire.

De rien, je pense aussi que les gens n'ont pas compris votre question. J'espère que j'ai compris.