webentwicklung-frage-antwort-db.com.de

Text vertikal zentrieren in einem 100% -igen Höhenunterschied?

Ich arbeite mit einem div, das 100% der übergeordneten divs-Höhe entspricht.

Das div enthält nur eine einzelne Textzeile.

Das div darf keine feste Höhe haben.

Meine Frage ist also.

Wie zentriere ich die Textzeile vertikal?

Ich habe versucht mit:

display: table-cell;  
line-height:200%;

Wenn es wichtig ist, ist das div absolut positioniert.


Aktuelles CSS

.requests {
    position: absolute;
    right: 0;
    height: 100%;
    width: 50px;
    padding: 0 10px;
    background-color: #69A4B5;
    display: table-cell;
    vertical-align: middle;
    border-bottom-right-radius: 5px;
}
33
Hailwood

Diese Antwort ist nicht mehr die beste Antwort ... siehe die Flexbox-Antwort unten!


Um es perfekt zu zentrieren (wie in Davids Antwort ) erwähnt, müssen Sie einen negativen oberen Rand hinzufügen. Wenn Sie wissen (oder erzwingen), dass nur eine einzelne Textzeile vorhanden ist, können Sie Folgendes verwenden:

margin-top: -0.5em;

zum Beispiel:

http://jsfiddle.net/45MHk/623/

//CSS:
html, body, div {
    height: 100%;
}

#parent
{
    position:relative;
    border: 1px solid black;
}

#child
{
    position: absolute;
    top: 50%;
    /* adjust top up half the height of a single line */
    margin-top: -0.5em;
    /* force content to always be a single line */
    overflow: hidden;
    white-space: nowrap;
    width: 100%;
    text-overflow: Ellipsis;
}

//HTML:
<div id="parent">
    <div id="child">Text that is suppose to be centered</div>
</div>​

Die ursprünglich akzeptierte Antwort wird nicht vertikal in der Mitte des Textes zentriert (sie zentriert sich auf der Oberseite des Textes). Wenn Ihr Elternteil nicht sehr groß ist, sieht es beispielsweise überhaupt nicht zentriert aus:

http://jsfiddle.net/45MHk/

//CSS:
#parent
{
    position:relative;
    height: 3em;
    border: 1px solid black;
}

#child
{
    position: absolute;
    top: 50%;
}​ 

//HTML:
<div id="parent">
    <div id="child">Text that is suppose to be centered</div>
</div>​
26
gregjhogan

Edit: Die beste und einfachste Möglichkeit, dies zu tun (derzeit in 2015 2017) verwendet flexbox:

.parent-selector {
    display: flex;
    align-items: center;
}

Und das ist es: D

Schauen Sie sich dieses Funktionsbeispiel an: http://jsfiddle.net/qj2Jr/114/

Alte Antwort: Sie können vertikal ausrichten: Mitte verwenden, wenn Sie auch Anzeige angeben: Tabellenzelle;

.div {
    display: table-cell;
    vertical-align: middle;
}

Arbeitsbeispiel: http://jsfiddle.net/qj2Jr/1/

Wenn dies nicht funktioniert, können Sie versuchen, das übergeordnete Element als display: table; festzulegen:

.parent-selector {
    display: table;
}

Edit: Sie haben diese Methode sowie alle in dieser anderen Frage behandelten Methoden zu dieser Frage: Wie zentriere ich Text mit CSS vertikal?

29
elboletaire

Versuchen Sie es hier http://jsfiddle.net/Husamuddin/ByNa3/ Es funktioniert gut mit mir,
css

.table {
    width:100%;
    height:100%;
    position:absolute;
    display:table;
}
.cell {
    display:table-cell;
    vertical-align:middle;
    width:100%;
    height:100%:
}

und das HTML

<div class="table">
    <div class="cell">Hello, I'm in the middle</div>
</div>
7
Husamuddin

Da es absolut positioniert ist, können Sie es mit top: 50% vertikal in der Mitte ausrichten.

Dann stoßen Sie jedoch darauf, dass die Seite größer ist, als Sie möchten. Zu diesem Zweck können Sie den Überlauf: ausgeblendet für das übergeordnete div verwenden. So habe ich den gleichen Effekt erzielt:

Das CSS:

div.parent {
    width: 100%;
    height: 300px;
    position: relative;
    overflow: hidden;
}
div.parent div.absolute {
    position: absolute;
    top: 50%;
    height: 300px;
}

Das HTML:

<div class="parent">
    <div class="absolute">This is vertically center aligned</div>
</div>
6
sarcastyx

Obwohl diese Frage ziemlich alt ist, gibt es hier eine Lösung, die sowohl mit einzelnen als auch mit mehreren Linien funktioniert, die vertikal zentriert werden müssen (kann leicht sowohl vertikal als auch horizontal zentriert werden, wie im CSS in gezeigt. Demo.

HTML

<div class="parent">
    <div class="child">Text that needs to be vertically centered</div>
</div>


CSS

.parent {
    position: relative;
    height: 400px;
}

.child {
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}
3
mkmllr

Ich stimme nicht zu, hier ist eine JS-freie Lösung, die funktioniert:

<html style="height: 100%;">
    <body style="vertical-align: middle; margin: 0px; height: 100%;">
        <div style="height: 100%; width: 100%; display: table; background-color: #ccc;">
            <div style="display: table-cell; width: 100%; vertical-align: middle;">
                <div style="height: 300px; width: 600px; background-color: wheat; margin-left: auto; margin-right: auto;">A</div>
            </div>
        </div>
    </body>
</html>
2
user1514042

umhüllen Sie Ihre Inhalte einfach mit einer Tabelle wie folgt:

  <table width="100%" height="100%">
         <tr align="center">
               <th align="center">
                 text
               </th>
          </tr>
  </table><
1
jcfrei

Wenn Sie wissen, wie groß Ihr Text sein wird, können Sie eine Kombination aus top:50% und margin-top:-x px verwenden, wobei x die halbe Höhe Ihres Textes ist.

Arbeitsbeispiel: http://jsfiddle.net/Qy4yy/

1
david

Wenn Sie die Zeilenhöhe auf dieselbe Höhe wie die div-Höhe einstellen, wird der Text zentriert. Funktioniert nur bei einer Leitung. (wie eine Schaltfläche).

0
nunny

hast du die Zeilenhöhe ausprobiert: 1em ;? Ich erinnere mich, dass dies der Weg ist, um es vertikal zu zentrieren. 

0
Genia S.

Haben Sie versucht, vertikal auszurichten: in der Mitte ???

Weitere Informationen zum vertikalen Ausrichten finden Sie hier: http://www.w3schools.com/css/pr_pos_vertical-align.asp

0
Wagner Silveira

Vertikale Ausrichtung, dynamische Höhe kombiniert mit absoluter Position ist mit Ausnahme einiger spezieller Bedingungen nicht möglich (z. B. jQuery). (kann möglicherweise in einigen Fällen mit Backend-Code gelöst werden, oder min-height mit sinnvollen Ober- oder Randstilen kombiniert, jedoch nicht perfekt)

Meistens verwende ich die absolute Position nur dann, wenn etwas "Popup" in Bezug auf etwas anderes sein sollte, was sich im Float befindet. Ich denke, das ist die beste Art, es zu benutzen, damit man sich nicht mit solchen Dingen beschäftigen muss.

Keine Beleidigung, aber die meisten Antworten hier sind weit weg.

0
plebksig

Moderne Lösung - funktioniert in allen Browsern und IE9 +

caniuse - Browserunterstützung.

.v-center {
  position: relative;
  top: 50%;
  -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
          transform: translateY(-50%);
}

Beispiel: http://jsbin.com/rehovixufe/1/

0
AntonB