Wie kann ich den text zentrieren zwischen den oberen und unteren Rand eines div?

Ich ausrichten möchte meinen text in der Mitte meiner div, aber ich kann nicht scheinen, damit es funktioniert. Wie kann ich dies tun?

Danke für die Hilfe!

<div style="height:40px;">Personal Information</div>

"Persönliche Daten" sollte in der Mitte zwischen oben und unten.

InformationsquelleAutor Andrew | 2011-02-02
  1. 3

    Machen line-height die Größe des Elements. Es wird jedoch nur funktionieren, wenn man nur eine Zeile text.

    InformationsquelleAutor yoda
  2. 3

    CSS:

    myDiv
{
display:table-cell;
vertical-align:middle;
}

    INLINE:

    <div style="display:table-cell; vertical-align:middle;">Personal Information</div>

    UPDATE:

    Dies funktioniert auf JSFIDDLE...

    div {
 display:table-cell;
 width: 200px;
 height: 200px;
 vertical-align:middle;
 background: red;
}
    • jsfiddle.net/seFEj
    • text-middle ist kein Gültiger Wert für die Eigenschaft
    • tut vertical-align:middle; richtet die div, nicht den text in es. sorry, um diese so auf die Nerven; ich dachte, es gäbe eine einfache Lösung
    • jsfiddle.net/johnk1/yYcsU
    InformationsquelleAutor John K.
  3. 2

    Können Sie die table-cell Anzeige Stil, dies zu erreichen:

    CSS

    display: table-cell;
vertical-align: middle;
    InformationsquelleAutor Evan Mulawski
  4. 1

    Wie über dieses?

    CSS:

    #outer {
    height: 400px;
    overflow: hidden;
    position: relative;
    width: 100%;
}

#outer[id] {
    display: table;
    position: static;
}

#middle {
    position: absolute;
    top: 50%;
    width: 100%;
    text-align: center;
} /* for explorer only */

#middle[id] {
    display: table-cell;
    vertical-align: middle;
    position: static;
}

#inner {
    position: relative;
    top: -50%;
    text-align: center;
} /* for explorer only */

#inner {
    margin-left: auto;
    margin-right: auto;
}

div.greenBorder {
    border: 1px solid green;
    background-color: ivory;
}

    HTML

    <div id="outer" class="greenBorder">
    <div id="middle">
        <div id="inner" class="greenBorder"> center

        </div>
    </div>
</div>

    http://jsfiddle.net/3NjUF/4/

    Dieser ist mit der Höhe von 40px:
    http://jsfiddle.net/3NjUF/5/

    InformationsquelleAutor ngen
  5. 0

    versuchen, diese(gelb ist es zu zeigen, dass es in der Mitte des div

      <html>
  <body>
  <div style="height:40px; background-color:yellow">
  <div style="position:absolute; top:50%; display:table">Personal Information</div>
  </div>

  </body>
  </html>
    InformationsquelleAutor Daniel Casserly
  6. 0

    Können Sie ein netter Trick, der margin:0 auto; ausrichten, der Inhalt im div zu zentrieren.
    In diesem Fall wird der folgende code sollte funktionieren,

    HTML:

     <div style="height:40px;"><span>Personal Information</span></div>

    CSS:

     span
    { 
      width: 50%;
      margin: 20px auto;
      text-align: center;
      display:block
    }
    InformationsquelleAutor Kumar_Vikas
Schreibe einen Kommentar