CSS, centré div, rétrécit pour s’adapter?

Voici 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 “some text” est un div. Je veux que le div soit la largeur minimum nécessaire pour contenir son texte sans emballage. Si le texte est trop long pour être ajusté sans être enveloppé, alors ça ira.

Je ne veux pas définir une largeur explicite pour le div. Je ne veux pas non plus définir la largeur minimale ou la largeur maximale; comme je l’ai dit, s’il y a trop de texte à contenir sur une seule ligne sans envelopper, alors ça ira.

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

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

EDIT : mise à jour pour utiliser une classe CSS plutôt qu’un atsortingbut inline et avoir modifié “block” en “inline-block”

Les accessoires à Josh Stodola, bien qu’il ne soit pas exactement exact. La propriété nécessaire est:

 display: inline-block; 

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

Je ne sais pas, les solutions ici semblent partiellement correctes, mais alors ne fonctionnent pas vraiment. Basé sur la réponse de Josh Stodola, voici une solution multi-navigateur 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; } 

Balisage:

 
Cum sociis natoque penatibus et magnis dis
parturient montes, nascetur ridiculus mus.

Pour append le support IE6 (soupir), ajoutez _height: [yourvalue] au div. Oui, avec un soulignement.

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

  

Some text above

some text

Some text below

Indice : n’utilisez pas les DIV pour les blocs de texte (pour le référencement et une meilleure utilisation de la sémantique)

Voici un exemple de ce que vous recherchez:
(jsfiddled ici: http://jsfiddle.net/yohphomu/ )

Attention:

Je suis un fanatique du 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 étant dit, vous pouvez utiliser auto), mais le seul problème est que si vous souhaitez modifier l’arrière-plan ou le placer une bordure le fera autour du champ désiré. Pourquoi est-ce et comment le réparer, lisez la suite.

Ou simplement copier et étudier l’exemple.

N’importe qui ayant ce problème ne s’est pas rendu compte de la chose (en supposant que vous ayez ce problème et utilisez les divs), tout ce qui se trouve entre les balises div est considéré comme un ensemble complet. signifie (les ordinateurs font ce qu’on leur dit, pas ce que vous voulez qu’ils fassent), donc (par exemple) pour définir l’alignement du texte au centre, il faut que toutes les lignes soient séparées par un espace, il borderait tout l’espace utilisé. Si vous comprenez cela, continuez à lire, sinon vous ne pouvez pas vous aider.

Alors maintenant que nous comprenons ce qui se passe, comment pouvons-nous le résoudre? Eh bien, il nous faut une partie pour la centrer, l’autre pour la colorer. Dans mon exemple, j’ai utilisé un div pour le centrer et l’étendre à la couleur. Avais-je besoin de la div? Je suis positif je n’ai pas. J’aurais pu réaliser la même chose en utilisant le p au centre (ou je pourrais me débarrasser du p et simplement utiliser div). La raison pour laquelle j’ai fait cela était de le garder organisé.

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

J’espère que cela a répondu à votre question. Il vous a fallu 4 ans pour une réponse mais moi, 30 minutes pour le comprendre (et j’étudie le CSS depuis quelques jours maintenant).

L’exemple:

 
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 here

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

Alors css ressemblerait à:

 .container { width: 500px; height: 500px; } .text { font-size: 20px; } .holder { text-align: center; } span { background-color: blue; border: 1px solid black; } 

Remarque: j’ai défini le conteneur avec la largeur et la hauteur définies car je travaillais sur un projet en même temps et que je simulais un plein écran avec du texte.

Notez également que je l’ai fait pour que le texte ait une couleur d’arrière-plan distincte avec une bordure. Je l’ai fait pour montrer que ses mesures sont indépendantes et redimensionnées si nécessaire.

Vous êtes les bienvenus, aussi je pense que les gens n’ont pas compris votre question. J’espère que j’ai fait.

Je recommande la flexbox ! Voir ce qui est possible sur ce site, résolu par Flexbox .

C’est assez récent mais fonctionne dans tous les principaux navigateurs modernes (IE10 utilise -ms- prefix, IE11 +, Firefox 31+, Chrome 31+, Safari 7+, …) – voir ce graphique .

Fondamentalement, le centrage vertical et horizontal, complété par un dimensionnement dynamic, peut être réalisé en 4 énoncés:

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

Assurez-vous que ce parent a réellement 100% de hauteur. Vous devrez peut-être définir le body et le html à 100% de hauteur également.

Ma mise en œuvre peut être consultée sur mon site Web personnel, http://pgmann.cf .

Quelque chose comme ça?

     

text text text text text text text text text text text text text text text text text text text text text text

hello

text text text text text text text text text text text text text text text text text text text text text text

  

some text

HTML

 
++++TEXT+++

CSS

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