2016-10-26 22 views
0

In meinem Projekt gibt es eine HTML-Tabelle, die jeweils eine dd enthält. Ich muss dieses div so einstellen, dass es zum td passt, also setze ich die Position von td auf relativ und div auf absolut.Wie zentriert Text im absoluten Div innerhalb td?

beachten Sie bitte die folgende Tabelle und seinen Stil:

table { 
 
    width: 500px; 
 
    height: 600px; 
 
} 
 
table td { 
 
    position: relative; 
 
} 
 
table td div { 
 
    position: absolute; 
 
    backgroundcolor: red; 
 
    top: 0; 
 
    right: 0; 
 
    bottom: 0; 
 
    left: 0; 
 
}
<table id="theTable"> 
 
    <tr> 
 
    <th>A</th> 
 
    <th>B</th> 
 
    <th>C</th> 
 
    </tr> 
 
    <tr> 
 
    <td> 
 
     <div>a1</div> 
 
    </td> 
 
    <td> 
 
     <div>b2</div> 
 
    </td> 
 
    <td> 
 
     <div>c2</div> 
 
    </td> 
 
    </tr> 
 
    <tr> 
 
    <td> 
 
     <div>a2</div> 
 
    </td> 
 
    <td> 
 
     <div>b2</div> 
 
    </td> 
 
    <td> 
 
     <div>c2</div> 
 
    </td> 
 
    </tr> 
 
</table>

Die oben gestylt Tisch ist einfach perfekt zu erfüllen, was ich erwartet hatte. Als nächstes möchte ich den Text im absoluten div als Mittelpunkt (vertikal einschließen) definieren.

Also ich fand es im Internet, die meisten von ihnen schlägt vor, dass div mit einem display: table; Stil zu geben. Offensichtlich ist es nicht :(

Kann irgendein mir sagen, wie jener Text zum Zentrum

+0

kann mir jemand helfen, es eine Live-Demo zu geben? –

+0

Einstellung td zu relativ hat keinen Effekt mate, muss etwas anderes versuchen. Warum platzierst du überhaupt ein div in die Zelle? Es ist einfach, Text innerhalb von td selbst zu zentrieren. – skobaljic

+0

@skobaljic mein Projekt ist ein Ereigniskalender, div ist in meinem Fall nützlicher. –

Antwort

0

Sie können einige 0-width inline-block Elemente setzen und setzen es ist vertical-align bis middle, wie der Code unten zeigt:

table { 
 
    width: 100%; 
 
} 
 
table td { 
 
    position: relative; 
 
    height: 100px; 
 
} 
 
table td div { 
 
    position: absolute; 
 
    background-color: red; 
 
    top: 0; 
 
    left: 0; 
 
    width: 100%; 
 
    height: 100%; 
 
    text-align: center; 
 
} 
 
table td div:before { 
 
    content: ''; 
 
    display: inline-block; 
 
    height: 100%; 
 
    vertical-align: middle; 
 
    /* just for demo */ 
 
    border-left: 1px solid green; 
 
}
<table id="theTable"> 
 
    <tr> 
 
    <th>A</th> 
 
    <th>B</th> 
 
    <th>C</th> 
 
    </tr> 
 
    <tr> 
 
    <td> 
 
     <div>a1</div> 
 
    </td> 
 
    <td> 
 
     <div>b2</div> 
 
    </td> 
 
    <td> 
 
     <div>c2</div> 
 
    </td> 
 
    </tr> 
 
    <tr> 
 
    <td> 
 
     <div>a2</div> 
 
    </td> 
 
    <td> 
 
     <div>b2</div> 
 
    </td> 
 
    <td> 
 
     <div>c2</div> 
 
    </td> 
 
    </tr> 
 
</table>

+0

Die Einstellung der relativen Position zu td hat keine Auswirkung. Was Sie in diesem Beispiel getan haben, ist: 1. Setzen Sie td height auf 100px, und setzen Sie die Höhe des Kindelements auf 100% - es hat nichts mit relativer/absoluter Positionierung zu tun. – skobaljic

+0

@skobaljic Aber wenn 'relative' als' absolute' Element entfernen wird seine Position und Dimensionen von nächsten nicht statischen Element nehmen -> html – Justinas

+0

Einstellung 'relativ' zu Tabellenzelle ist nicht definiert, es funktioniert nicht - hoffe, es ist klar jetzt. – skobaljic

0

table{width:500px;height:600px;} 
 
table td { 
 
    position: relative; 
 
    
 
} 
 
table td div{ 
 
    background-color:red; 
 
    position:relative; 
 
    display: table; 
 
    width: 100%; 
 
    height: 100%; 
 
} 
 
table td div span { 
 
display: table-cell; 
 
    vertical-align: middle; 
 
    text-align: center; 
 
    width: 100%; 
 
    
 
}
<table id="theTable"> 
 
    <tr> 
 
    <th>A</th> 
 
    <th>B</th> 
 
    <th>C</th> 
 
    </tr> 
 
    <tr> 
 
    <td><div><span>a1</span></div></td> 
 
    <td><div><span>b2</span></div></td> 
 
    <td><div><span>c2</span></div></td> 
 
    </tr> 
 
    <tr> 
 
    <td><div><span>a2</span></div></td> 
 
    <td><div><span>b2</span></div></td> 
 
    <td><div><span>c2</span></div></td> 
 
    </tr> 
 
</table>

+0

Aber div selbst füllt nicht 'td' ... – Justinas

+0

Es ist ein Muss? Ich denke, die Frage ist, wie man den Text zentriert. –

+0

@JordiFlores die primäre Sache ist es, das div auf die td .. –

Verwandte Themen