Vertikal ausrichten text innerhalb der div-element

Ich weiß, diese Frage wurde gebeten, den Tod, aber nichts über die Suche hat für mich gearbeitet.

Weißt du den deal, ich habe ein div-element, das ich brauche, um vertikal ausrichten von text in aber nichts hat geklappt (position:absolute;top:50%;margin-top:-x;display:table-cell;vertical-align:middle;etc., etc.)

Hier ist, was ich arbeite (sorry für die inline-CSS). Sowieso, die würde ich verwenden, line-height, aber der text kann in einer oder zwei Zeilen. Es sollte vertikal ausrichten mit dem Bild immer die max-Höhe von 30px (30x50).

 <div style="margin:0 0 10px 0;padding:10px;border:2px solid #606060;background-color:#2b2b2b;-webkit-border-radius:8px;-moz-border-radius:8px;border-radius:8px;">
 <div style="float:left;width:55px;height:40px;">
 <a href="link"><img style="max-width:50px;border:1px solid #ffb92c;" src="image.jpg" alt="" /></a>
 </div>
 <div style="float:right;width:155px;font-size:0.7em;height:40px;">
 <a href="link">This is the text to vertically align</a>
 </div>
 </div>
Müssen Sie verwenden Sie inline -CSS? Macht es ein Schmerz zu beantworten...
Nein, überhaupt nicht, ich Plane die Umwandlung aller dieser reg CSS sobald ich es herausfinden

InformationsquelleAutor Tom | 2011-07-13

  1. 7

    Die Idee ist aus hier und sollte für alle Browser.

    <div style="margin: 0 0 10px 0; padding: 10px; border: 2px solid #606060; background-color: #2b2b2b;
    -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px;">
    <div style="float: left; width: 55px; height: 40px;">
        <a href="link">
            <img style="max-width: 50px; border: 1px solid #ffb92c;" src="image.jpg"
                alt="" /></a>
    </div>
    <div style="float: right; width: 155px; font-size: 0.7em; height: 40px; display: table; #position: relative; overflow: hidden;">
        <div style="#position: absolute; #top: 50%; display: table-cell; vertical-align: middle;">
            <div style="#position: relative; #top: -50%;">
                <a href="link">This is the text to vertically align</a>
            </div>
        </div>
    </div>
    <div style="clear: both"></div>
</div>
    Bild und text sind nicht korrekt vertikal ausgerichtet
    Das war in der Nähe, aber der text ist unterhalb der Mitte Punkt.
    Es ist, weil die anderen Ränder oder Polstern Ihrer html-fragment. Sowieso, wenn Sie einige dynamische Größe und div ausrichten möchten Inhalt vertikal der link bietet nur cross-browser-Lösung vorhanden. Andere Lösungen entweder arbeitet für die statische Höhe oder nur für bestimmte browser und eine version größer als bla bla...
    Ich habe tatsächlich mit ihm zu arbeiten. Es war nicht der text, der war nicht richtig ausrichten, es war die Bild. Wenn ich wickeln Sie das Bild in den gleichen div-tags wie ich den text, alle Linien.
    Jubel!!!!

    InformationsquelleAutor Yiğit Yener

  2. 9

    Eine andere Sache, die Sie tun können. Wenn es nur eine Zeile text in das div, die Sie verwenden können line-height

    Beispiel

    div {
    line-height:40px;
}
    Könnte es sein, entweder eine oder zwei Zeilen.

    InformationsquelleAutor brenjt

  3. 3

    Müssen Sie dies so tun:

    http://jsfiddle.net/rathoreahsan/5u9HY/

    Verwenden fixed height statt padding im main div. und verwenden Sie line-height für die Links & rechts Divs

    Line-height funktioniert nur, wenn es eine Zeile text, es könnte ein oder zwei.

    InformationsquelleAutor Ahsan Rathod

  4. 1

    Hier ist eine saubere version der Lösung

    <div style="background: yellow">
<div style="width: 155px; font-size: 0.7em; height: 40px; display: table; overflow: hidden;">
    <div style="display: table-cell; vertical-align: middle;">
        <div style="">
            <a href="link">This is the text to vertically align</a>
        </div>
    </div>
</div>
<div style="clear: both"></div>

    http://jsfiddle.net/5y4Nb/

    aktualisiert fiddle : jsfiddle.net/5y4Nb/89

    InformationsquelleAutor Yock

  5. 0

    Scheint sich wie ein Roter float-Problem, das behoben werden kann mit ein clearfix oder, wie ich in den folgenden code-snippet, mit einer festen Höhe des wrapper.

    Ich saß auch eine line-height des floatenden divs und machte es ein wenig breiter.

    Werfen Sie einen Blick auf diese:

     <div style="margin:0 0 10px 0;padding:10px;border:2px solid #606060;background-color:#2b2b2b;-webkit-border-radius:8px;-moz-border-radius:8px;border-radius:8px;height:40px">  <div style="float:left;width:55px;height:40px;">  <a href="link"><img style="max-width:50px;border:1px solid #ffb92c;" src="image.jpg" alt="" /></a>  </div>  <div style="float:right;width:185px;font-size:0.7em;height:40px;line-height:40px">  <a href="link">This is the text to vertically align</a>  </div>  </div>

    http://jsfiddle.net/YqxPZ/3/

    Ihr fix einige bugs hat. Bild und text sind beide nicht richtig vertikal zueinander ausgerichtet, und auch innerhalb eine div.
    Danke, aber das funktioniert nicht, wenn der text lang genug ist, um zwei Zeilen.

    InformationsquelleAutor Mattias Alfborger

  6. 0

    Ist, dass Sie brauchen, um zu zeigen, nur ein paar Zeilen eines sehr langen text, hier ist die Fiddle. Passen Sie die Höhe nach Bedarf.

        .container-text {
    height:40px;
    width:180px;
    overflow-y:hidden;    
    display:table-cell;
    vertical-align:middle;
    text-align: center;
}

    InformationsquelleAutor ihimv

Schreibe einen Kommentar