Ausrichtung Bild und Text in der CSS-Tabelle

Habe ich gesehen, dass mehrere CSS-Ausrichtung-Tipps, aber keiner in Bezug auf eine Tabelle.

Mein code für die Tabelle-Eigenschaften sind wie folgt:

    table.pic {
    border-spacing: 1;
    }
    table.pic td {
    padding: 5px;
    border: 4px solid #cccccc;
    }
    table.pic tr:nth-child(odd) {
    background-color: #f2f2f2;
        }

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

Dies ist mein code für die erste Zeile in der Tabelle:

<table class="pic" style="width: 100%;">
<tbody>
<tr>
<td><img src="/sites/default/files/images/img.jpg" alt="" width="146" height="218" /></td>
<td>
<p>blahblah</p>
<p>poodle</p>
<p>noodle</p>
</td>
</tr>
</tbody>
</table>

Egal welche änderung ich versuche zu machen, den text noch endet, bis auf die eine Zelle nach rechts, aber vertikal es beginnt auf der untersten Zeile des Bildes. Wer weiß, was mein Problem ist?

es gibt keine div im HTML-Beispiel, das Sie gegeben haben.
wo sollte ich hinzufügen, div? Ich habe gerade versucht, dass es um den text-Blocks (<td><div>....</div></td>) und das hat nicht funktioniert.
<div><p>...</p>... </div> einhüllen würde der text in einem block-element; mit änderung von css vertical-align im div wrapper ... <td><div><p>...</p></div></td>

InformationsquelleAutor Kevin Kesicki | 2013-11-14

  1. 1

    Auf jsfiddle der text ist nicht ausgerichtet auf den unteren Rand des Bildes, es ist vertikal zentriert : http://jsfiddle.net/u3AW2/

    Haben Sie vielleicht überschreibt irgendwo.

    Den text auch vertikal zentriert werden mit :

       table.pic td{
        display:table-cell; 
        vertical-align:middle;
    }
    Ich hasse es, wenn sich etwas ändert die Regeln 🙁

    InformationsquelleAutor JinSnow

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

    richtet div-Elemente, die Kinder von Tabellen mit einer Klasse pic. Ich sehe nicht, das div in den html-Code.

    Ich nehme an, Sie wollen

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

    ausrichten alle td-Elemente der Tabelle in der vertikalen Mitte.

    Updade:

    versuchen zu überschreiben Thema Regeln können Sie mehr selektiv

    table.pic {
border-spacing: 1;
}
table.pic td {
padding: 5px;
border: 4px solid #cccccc;
}
table.pic tr:nth-child(odd) {
background-color: #f2f2f2;
    }

/* use more selectivity */
html body table.pic tr td {
    display:table-cell !important; 
    vertical-align:middle !important;
}
    danke, aber es gibt mir immer noch die gleichen Ergebnisse, text ist bündig mit der unteren Kante des Bildes
    Welchen browser verwenden Sie? hast du ein <!doctype html> in html, um es in den standards-Modus? Mit chrome ist es zentriert.
    ich bin auf chrome als gut, aber ich bin mit dieser durch drupal 7
    rechten Maustaste auf das element, und wählen Sie element untersuchen, suchen für alle zusätzlichen css-Regeln bewirken die Regeln, die Sie hinzufügen möchten.

    InformationsquelleAutor Wayne

  3. 0

    Ich hatte genau das gleiche Problem und festgestellt, dass es war, weil ich mit einem CSS-Reset. Aus irgendeinem Grund war dies in Konflikt mit meinem style-sheet. Ich war speziell mit der man auf Meyerweb. Verwenden Sie diese zurücksetzen? Wenn ja, versuchen Sie, die erste Regel wie folgt:

    html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend, caption, tfoot, thead,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}

    InformationsquelleAutor BhavinPatel

Schreibe einen Kommentar