web-dev-qa-db-fra.com

Centrer verticalement le contenu d'une div flottante

Comment centrer le contenu de div flottant (quelle hauteur je ne connais pas)? 

Il existe un langage HTML et CSS très simple (voir ce violon: http://jsfiddle.net/DeH6E/1/ )

<div class="floating">
    This should be in the middle
</div>
​
.floating {
    height: 100px;
    float: left;
    border: 1px solid red;
    vertical-align: middle;
}   ​

Comment faire en sorte que la phrase "Cela devrait être au milieu" apparaisse vraiment au milieu (centrée verticalement)? vertical-align: middle ne semble pas fonctionner. J'ai essayé display: table-cell et cela n'a pas fonctionné non plus. Quelle est la meilleure façon de résoudre ce problème? Je voudrais éviter d'insérer d'autres balises HTML, faites-le simplement via CSS.

(Juste pour préciser: je ne connais pas la hauteur réelle du conteneur, 100px est juste pour l'exemple)

EDIT: J'aimerais que vous me compreniez, alors ... Toujours lorsque je conçois une page Web, je suis conforme à la règle voulant que HTML soit le contenu et que CSS soit responsable du style visuel. Je ne les mélange jamais ensemble ou n'utilise l'un que pour activer l'autre. Dans ce cas, je tiens également à respecter cette règle. Je ne veux pas insérer d'élément HTML uniquement pour le CSS.

csscss-floatcss-positionvertical-alignment
20
Pavel S.

Les autres ont raison, vous devez imbriquer deux éléments DOM , ce qui vous donne plus d'options pour contrôler le centrage. Voici le code:

.floating {
  display: table;
  float: right;
  height: 200px;
  width: 400px;
  border: 1px solid red;
}
.floating p {
  display: table-cell; 
  vertical-align: middle; 
  text-align: center;
}
<div class="floating">
    <p>This is the proper way that validates and breaks across multiple
    lines, if the text is longer than just a few words and still
    should be vertically centered. Here, it's also horizontally
    centered for added joy.</p>
</div>

12
Systembolaget

Ajoutez le texte à l'intérieur d'un <p>.

HTML

<div class="floating">
    <p>This should be in the middle</p>
</div>

CSS

.floating {
    height: 100px;
    border: 1px solid #f00;
    display: table-cell;
    vertical-align: middle;
}
​
6
Henrik Ammer

Si vous connaissez la hauteur, alors

line-height:100px;

Sinon, utilisez javascript pour définir line-height après le rendu.

http://jsfiddle.net/DeH6E/4/

6
maxisam

Je cherchais également une solution à ce problème et finis par proposer ceci:

http://jsfiddle.net/w6j9mgjp/1/

.floating {
    height: 100px;
    float: left;
    border: 1px solid red;
}

.floating::before {
    content: "a";
    display: block;
    visibility: hidden;
    height: 50%;
    margin-top: -.7em;
}

cela ne fonctionne que pour une seule ligne de texte, cependant.

2
Spongman

http://jsfiddle.net/DeH6E/2/

le texte à l'intérieur de votre div doit être dans sa propre balise div, et cette balise div doit être définie pour afficher: table-cell; et vertical-align: middle; tandis que votre div .floating doit être défini comme display: table;

ou vous pouvez y placer une balise p ou une autre sorte de balise de formatage, par exemple span ou p

1
PhazingAzrael

Il suffit de jouer avec le pseudo sélecteur.

.floating {
    height: 100px;
    float: left;
    border: 1px solid red;
}

.floating::before {
    content: '';
    display: inline-block;
    vertical-align: middle;
    height: 100%;
}
1
dsaket