web-dev-qa-db-de.com

Inhalt des Floating-Div. Vertikal zentrieren

Wie zentriere ich den Inhalt des gleitenden div (welche Höhe weiß ich nicht)? 

Es gibt sehr einfache HTML- und CSS-Dateien (siehe diese Geige: 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;
}   ​

Wie kann ich den Satz "Dies sollte in der Mitte sein" wirklich in der Mitte (vertikal zentriert) erscheinen lassen? vertical-align: middle scheint nicht zu funktionieren. Ich habe display: table-cell ausprobiert und es hat auch nicht funktioniert. Was ist der beste Weg, um dieses Problem zu lösen? Ich möchte es vermeiden, andere HTML-Tags einzufügen, einfach über CSS.

(Um es klar zu sagen: Ich kenne die tatsächliche Höhe des Containers nicht, 100px ist nur für das Beispiel)

EDIT: Ich möchte, dass Sie mich verstehen, also ... Immer wenn ich eine Webseite entwerfe, befolge ich die Regel, dass HTML den Inhalt enthält und CSS für den visuellen Stil verantwortlich ist. Ich mische sie nie zusammen oder benutze eins, um das andere zu ermöglichen. In diesem Fall möchte ich auch bei dieser Regel bleiben. Ich möchte kein HTML-Element nur für CSS einfügen.

20
Pavel S.

Die anderen sind richtig, Sie müssen zwei DOM-Elemente verschachteln, wodurch Sie mehr Optionen zur Steuerung der Zentrierung haben. Hier ist der 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

Fügen Sie den Text in einen <p> ein.

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

Wenn Sie die Höhe kennen, dann

line-height:100px;

Wenn nicht, verwenden Sie Javascript, um die Zeilenhöhe nach dem Rendern festzulegen.

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

6
maxisam

Ich habe auch nach einer Lösung dafür gesucht und bin schließlich dazu gekommen:

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

es funktioniert jedoch nur für eine einzelne Textzeile.

2
Spongman

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

der Text in Ihrem div muss sich in einem eigenen div-Tag befinden, und dieses div-Tag muss so eingestellt sein, dass es angezeigt wird: table-cell; und vertikal ausrichten: Mitte; Ihr .floating div muss als Anzeige gesetzt werden: table;

oder Sie können dort ein p-Tag oder eine andere Art von Formatierungs-Tag setzen, das Ihren Text enthält, z. B. span oder p

1
PhazingAzrael

Spielen Sie einfach mit dem Pseudo-Selektor.

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

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