Wie-center den text in ein div-element?

Ich versuche zu schaffen, Quadrat-element, wird der text zentriert, sowohl vertikal als auch horizontal. Darüber hinaus der gesamte Bereich des Platzes sollte ein link. Das ist mein HTML:

<div class="w1h1 medium">
    <a class="userLink" target="_blank" href="Fancybox.aspx">
        <table style="width: 100%; height: 100%">
            <tr style="vertical-align: central">
                <td style="text-align: center; font-weight: bold;">
                    text in the middle 
                </td>
            </tr>
        </table>
    </a>
</div>

Und dies ist mein CSS:

div.w1h1 {
    width: 150px;
    height: 150px;
}

.medium {
    background-color: #06849b;
    color: white;
    font-family: sans-serif;
}

a.userLink
{
    width: 150px;
    height: 150px;
    display: table;
    color: #FFFFFF;
    text-decoration: none;
}

Funktioniert es in Chrome und Firefox, aber nicht im Internet Explorer. Im IE wird der text am oberen Ende des Platzes, nicht in der Mitte. Können Sie mir helfen mit diesem?

Ich gerade erstellt Spielplatz hier: http://jsfiddle.net/Tschareck/yfnnm/

  • ändern <tr style="vertical-align: central"> zu <tr style="vertical-align: middle"> jsfiddle.net/yWLYV
  • Schon versucht. Das hat sich auch nicht geändert text der position.
InformationsquelleAutor Tschareck | 2013-10-09
  1. 18

    Könnte man vereinfachen Sie Ihre Struktur ein wenig, und verwenden Sie display:table-cell auf die a element.

    html

    <div class="w1h1 medium">
    <a class="userLink" target="_blank" href="Fancybox.aspx">
       text in the middle 
    </a>
</div>

    css

    div.w1h1 {
    width: 150px;
    height: 150px;
    font-family:sans-serif;
    background-color: #06849b;
}
a.userLink {
    width: 150px;
    height: 150px;
    display: table-cell;
    vertical-align:middle;
    text-align:center;
    color: #FFFFFF;
    text-decoration: none;
}

    Demo auf http://jsfiddle.net/yWLYV/1/

    eignet sich für bis zu IE8

    • Das in allen Browsern funktioniert und der code ist elegant.
    InformationsquelleAutor Gabriele Petrioli
  2. 9

    Eine großartige Möglichkeit, um perfekt zentrierter text ist der Einsatz einer flexbox-layout. Sie kann horizontal und vertikal zentrieren Sie die Inhalte von einem container-element mit sehr wenig code:

    .container-with-centered-content {
  display: flex;
  align-items: center;
  justify-content: center;
}

    Demo: http://jsfiddle.net/913fch6v/

    • Es funktioniert! Dies sollte akzeptiert werden Antwort!
    • Ich bin damit einverstanden. Dies sollte die akzeptierte Antwort. Danke.
    InformationsquelleAutor bromy
  3. 1

    Ändern <tr style="vertical-align: central"> zu <tr style="vertical-align: middle"> und a.userLink Eigenschaft display zu inline-block oder inline.

    jsfiddle

    • Das ist es! display CSS
    • Nun aber der link funktioniert nicht im IE 🙁
    InformationsquelleAutor Morpheus
  4. 1

    versuchen meine Technik; Folgen Sie dieser 

    .outer{ float:left; width:100px; height:100px; background-color:#ccc; }
.innet{ float:left; width:100%; line-height:100px; text-align:center; }

<div class="outer">
        <span class="inner">This is my text</span>
</div>

    und morpheus alles in Ordnung! 😉

    InformationsquelleAutor avalkab
  5. 1

    Versuchen Sie es mit: line-height: 150px um die Höhe des Inhalts in der box. Dies sollte gut funktionieren, wenn es nur eine einzige Zeile Inhalt.

    InformationsquelleAutor acairns
  6. 1

    Versuchen, diese:

    HTML:

    <a href="#">Text here</a>

    CSS:

    a {
    display: block;
    width: 150px;
    height: 150px;
    background-color: #06849b;
    color: white;
    font-family: sans-serif;
    vertical-align: middle;
    line-height: 150px;
    text-align: center;
    text-decoration: none;
    font-weight: bold;
}

    Und ein demo.

    Bitte beachten Sie, dass es erlaubt nur eine Zeile text... ist das ein problem?

    BEARBEITEN, eine bessere Lösung gefunden, die Anzeige der Anker als eine Zelle in der Tabelle, arbeiten mit mehreren Linien zu:

    a {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
    width: 150px;
    height: 150px;
    background-color: #06849b;
    color: white;
    font-family: sans-serif;
    text-decoration: none;
    font-weight: bold;
}

    Aktualisiert fiddle

    InformationsquelleAutor LinkinTED
  7. 0

    Verwenden valign="middle" im <td>

    Beispiel:

    <td style="text-align: center; font-weight: bold;" valign="middle">
   text in the middle 
</td>
    InformationsquelleAutor SKeurentjes
Schreibe einen Kommentar