wake-up-neo.com

Vertikale Ausrichtung aller (!) Elemente in TD?

Ich habe eine einfache table mit 1 TD mit vertical-align:middle;. Dieses TD enthält ein Image

<table>
<tr>
    <td>
        <img src='http://static.jsbin.com/images/favicon.png'/>
    </td>
</tr>
</table>

enter image description here

Alles ist Ok und die IMG ist vertikal ausgerichtet.

Aber Wenn ich nach diesem Image weitere Elemente hinzufüge (z. B. ein span): 

  <td>
    <img src='http://static.jsbin.com/images/favicon.png'/>
    <span>aaa</span>
  </td>

Das Ergebnis ist : 

enter image description here

Frage

Muss die vertikale Ausrichtung von TD nicht vertikal sein all seine untergeordneten Elemente?

Wie kann ich span auch zentriert machen lassen? 

Full JSBIN

NB

Ich möchte keine weiteren TD hinzufügen oder float mit Polsterung/Rand verwenden. IE8 +.

bearbeiten:

Erwünschtes Ergebnis :

enter image description here

40
Royi Namir

Frage
Muss die vertikale Ausrichtung des TD nicht alle seine Childs vertikal ausrichten?

NEIN.
Wenn Sie vertical-align auf td anwenden, wird dies nur auf td angewendet, und nicht wird von einem seiner untergeordneten Elemente geerbt.

Wenn ich einen TD mit nur Spannweite habe, wird er vertikal ausgerichtet. Wenn ich ein TD mit nur IMG darin hatte, wird es auch ausgerichtet.

Dies liegt an der Funktionsweise von vertical-align für td. Die Gesamthöhe der Zelle, d.h. td wird berechnet und die ganze Zelle wird vertikal ausgerichtet.

Wenn es einen einzigen img gibt, ist die Höhe von td die gleiche wie die von img, so dass scheint, dass vertical-align für img ist middle. Tatsächlich ist das td mit dem img als vertical-align : baseline vertikal zur Mitte ausgerichtet.

Dasselbe ist der Fall, wenn es eine einzige span gibt.

aber wenn ich beides habe, dann nicht. Warum das ? 

Denn jetzt ist die height von td die kombinierte height der beiden img + span. Tatsächlich ist td vertikal in der Mitte ausgerichtet, jedoch nicht img und span.

Wie kann ich die Spannweite auch zentrieren lassen? 

Sie müssen dieses CSS anwenden: 

td > * {
    vertical-align : middle;
}

Dadurch wird das CSS auf alle Kinder angewendet.

Überprüfen Sie das JSFiddle für ein besseres Bild.

Hoffe, das beantwortet deine Frage.

56
Nikhil Patel

Sie können einfach vertical-align: middle; für Ihre Spanne verwenden

img
{
  height:43px;width:43px;
  display: inline;
  vertical-align: middle;
}

span
{
  vertical-align:middle;
  display: inline;

}

dein jsbin


Wie pro Kommentar


Sie denken vielleicht, als wäre td vertical-align: middle; gegeben, dann sollte es den gesamten Inhalt darin ausrichten, aber mit einem Bild und einem Bereich, in dem der Browser das Bild versteht, was ist das? : Ist dies ein Inline- oder Inline-Block, müssen Sie die Anzeige einstellen: Inline oder Inline-Block; In diesem Fall wird möglicherweise nur die Anzeigeeigenschaft für ein Bild angezeigt. Demo

Bearbeiten

img Tag: source: Anzeige Inline vs Inline-Block

Sie sind "Block" -Elemente, da sie eine Breite und eine Höhe haben.

Es ist wahr, sie sind beides - oder genauer gesagt, sie sind "Inline-Block" -Elemente. Dies bedeutet, dass sie wie Text inline fließen, aber auch wie Blockelemente Breite und Höhe haben.

Überprüfe auch das:

Ersetzte Elemente

Ein ersetztes Element ist jedes Element, dessen Aussehen und Abmessungen von einer externen Ressource definiert werden. Beispiele sind Bilder (Tags), Plugins (Tags) und Formularelemente (, und Tags). Alle anderen Elementtypen können als nicht ersetzte Elemente bezeichnet werden.

Ersetzte Elemente können intrinsische Dimensionen haben - Breiten- und Höhenwerte, die vom Element selbst und nicht von der Umgebung im Dokument definiert werden. Wenn beispielsweise für ein Bildelement eine Breite festgelegt ist, die auf "auto" gesetzt ist, wird die Breite der verknüpften Bilddatei verwendet. Intrinsische Dimensionen definieren auch ein intrinsisches Verhältnis, das zur Bestimmung der berechneten Dimensionen des Elements verwendet wird, wenn nur eine Dimension angegeben wird. Wenn zum Beispiel nur die Breite für ein Bildelement angegeben wird (z. B. 100 Pixel) und das tatsächliche Bild 200 Pixel breit und 100 Pixel hoch ist, wird die Höhe des Elements um denselben Betrag auf 50 Pixel skaliert.

Ersetzte Elemente können auch visuelle Formatierungsanforderungen haben, die von dem Element außerhalb der Kontrolle von CSS festgelegt werden. Beispielsweise steuert die Benutzeroberfläche die für Formularelemente gerenderten Elemente.

In einem Inline-Formatierungskontext können Sie sich auch ein ersetztes Element als ein Element vorstellen, das als ein einziges großes Zeichen für das Wrapping und das Layout fungiert. Für ersetzte Inline-Elemente können Breite und Höhe angegeben werden. In diesem Fall wird die Höhe des Zeilenrahmens, in dem sich das Element befindet, groß genug, um das ersetzte Element aufzunehmen, einschließlich aller angegebenen Boxeneigenschaften.

7

In allen Fällen macht der vertical-align: middle; auf der td das, was von ihm erwartet wird. Richten Sie also td auf die Mitte dieser Zeile und den gesamten Inhalt von td auf die vertikale Mitte (standardmäßig) aus, wobei oben und unten gleiche Leerzeichen vorhanden sind.

Folgendes sagt die W3 Specvertical-align: middle:

Die Mitte der Zelle ist auf die Mitte der Zeilen ausgerichtet, die sie überspannt.

enter image description here

Berechnung der Zeilenhöhe:

Die Höhe der Box eines "Tabellenzeilen" -Elements wird berechnet, wenn der Benutzeragent alle Zellen in der Zeile zur Verfügung hat: Es ist das Maximum der berechneten "Höhe" der Zeile, die berechnete "Höhe" jeder Zelle in der Zeile. und die minimale Höhe (MIN), die von den Zellen benötigt wird.

In CSS 2.1 ist die Höhe eines Zellenfelds die Mindesthöhe, die der Inhalt benötigt. Die Eigenschaft 'height' der Tabellenzelle kann die Höhe der Zeile beeinflussen (siehe oben), erhöht jedoch nicht die Höhe der Zellenbox. 

Zellenkästen, die kleiner als die Zeilenhöhe sind, erhalten zusätzliche Auffüllung von oben oder unten.

Infolge der obigen Ausführungen wird die Höhe von tr und td 100px, aber die Zellenbox nimmt nur die Höhe des Inhalts in Anspruch (img height = 43px). Da das Zellenfeld nun kleiner als die Zeilenhöhe ist, wird eine zusätzliche Auffüllung hinzugefügt, wie in Feld 5 des obigen Bildes dargestellt, und der Inhalt wird daher auch in der Mitte ausgerichtet.


TD hat nur ein Bild:

Wenn nur img vorhanden ist, entspricht die Inhaltshöhe der Höhe von img. So wird es in die Mitte positioniert.

enter image description here

Wie im obigen Bild zu sehen ist, ist für den img kein expliziter vertical-align: middle erforderlich, da der td seinen Inhalt an der Mitte ausrichtet.


TD enthält nur Inline-Daten:

Wenn td nur span oder span plus eine Inline div enthält, entspricht die Höhe des Inhalts dem Standardcode line-height (oder einem beliebigen angegebenen line-height). In diesem Fall richtet das td es richtig aus. 

enter image description here

Wenn der Textinhalt über die erste Zeile hinausgeht (siehe Demo), können Sie sehen, dass td den first-line (in zyanfarbenem Hintergrund markiert) automatisch nach oben schiebt, um sicherzustellen, dass der Inhalt insgesamt auf die Mitte ausgerichtet ist einzelne Zeile).


TD hat ein Bild und einen Bereich:

Wenn wir ein img und ein span (Inline-Text) in das td einfügen, wird die Inhaltshöhe gleich der Höhe des img plus dem line-height der zweiten und der folgenden Zeilen.

In dieser Situation gibt es zwei mögliche Fälle, wie unten beschrieben:

Fall 1 -imgTag hat keinevertical-alignangegeben

In diesem Fall wird img an baseline (Standardeinstellung) ausgerichtet. Dann richtet td den gesamten Inhalt zur Mitte aus. Dies bedeutet, dass td am oberen und am unteren Rand des Inhalts um 28,5px (= (100-43)/2) gap bleibt. Wieder erledigt der vertical-align auf td den Job, der Inhalt wird in die Mitte gestellt (dh oben und unten gleiche Lücke gelassen). Der Text wird jedoch nach unten gedrückt, da img height mehr ist. 

enter image description here

Wenn wir die img-Höhe auf weniger als die Zeilenhöhe (z. B. 10px) reduzieren, können wir feststellen, dass sie auch mit img + span zur Mitte ausgerichtet wird.


Fall 2 -imgTag hatvertical-align: middle 

In diesem Fall macht vertical-align auf td dasselbe wie in Fall 1. Der Text in diesem Fall ist jedoch in der Nähe der Mitte , da img ebenfalls auf middle der Zeile ausgerichtet ist.

enter image description here

table {
  border: solid 1px red;
}
td {
  height: 100px;
  width: 200px;
  vertical-align: middle;
  border: solid 1px green;
}
img {
  height: 43px;
  width: 43px;
  border: solid 1px green;
}
.one td + td img {
  vertical-align: middle;
}
.three td + td img {
  height: 10px;
  width: 10px;
}
.four img {
  vertical-align: middle;
}
.five img + img{
  height: 50px;
  width: 50px;
}
td:first-line {
  background-color: cyan;
}
div {
  display: inline;
}
<table>
  <tr class='one'>
    <td>
      <img src='http://static.jsbin.com/images/favicon.png' />
    </td>
    <td>
      <img src='http://static.jsbin.com/images/favicon.png' />
    </td>
  </tr>
  <tr class='two'>
    <td>
      <div>aaa</div>
      <span>aaa</span>
    </td>
    <td>
      <div>aaa</div>
      <span>aaa aaaaaaa aaaaaaaa aaaaaaaa</span>
    </td>
  </tr>
  <tr class='three'>
    <td>
      Case 1
      <img src='http://static.jsbin.com/images/favicon.png' />
      <span>Image + Span</span> 
    </td>
    <td>
      Case 1
      <img src='http://static.jsbin.com/images/favicon.png' />
      <span>Image + Span</span> 
    </td>
  </tr>
  <tr class='four'>
    <td>
      Case 2
      <img src='http://static.jsbin.com/images/favicon.png' />
      <span>Image + Span</span> 
    </td>
    <td>
      <img src='http://static.jsbin.com/images/favicon.png' />
      <span>Image + Span + more text.......</span> 
    </td>
  </tr>
  <tr class='five'>
    <td>
      Case 3
      <img src='http://static.jsbin.com/images/favicon.png' />
      <img src='http://static.jsbin.com/images/favicon.png' />
      <span>Image + Span text...</span> 
    </td>
    <td>
      <img src='http://static.jsbin.com/images/favicon.png' />
      <span>Image + Span + more text.......</span> 
    </td>
  </tr>  
</table>

3
Harry

Hier ist eine JS-Geigenlösung

Geige

Hier ist die CSS

  table
{
  border:solid 1px red;
  width:300px;
}

td
{
  height:100px;
  vertical-align:middle;
  width:100%;
  border:solid 1px green;
}
img
{
  display: inline;
height: 43px;
width: 43px;
  position: relative !important;
float: left;
}

span
{
  height: auto !important;
width: 80%;
float: right;
position: relative;
vertical-align: middle !important;
text-align: left;
}
3
Anobik

Fügen Sie einfach vertical-align:middle; zu Ihrem Bildstil hinzu.

Demo

2
Jazcash
<style>
table
{
  border:solid 1px red;
  width:300px;
}

td
{
  height:100px;  
  width:100%;
  border:solid 1px green;
  vertical-align:middle;
  line-height:100px;
}
img
{
  height:43px;width:43px;
  vertical-align:middle;
}
</style>
1
Ankit Agrawal

Tento atribut CSS nepřejde na žádné jiné druhy prvků . Když začínající vývojář použije vertikální zarovnání na normální elementy bloku (jako standard).

Stačí přidat vertical-align: middle do třídy <img>.

Vaše CSS von měla vypadat takto ...

table
{
  border:solid 1px red;
  width:300px;
}

td
{
  height:100px;
  vertical-align:middle;
  width:100%;
  border:solid 1px green;
}
img
{
  height:43px;width:43px;
  vertical-align: middle;
}

Můžete zobrazit Sample Fiddle ...

0
webfrogs

DEMO

füge einfach diese Klasse hinzu:

td *{
  vertical-align:middle
}

Bearbeiten:

die Frage ist, warum, wenn Sie ein Bild zum td-Text hinzufügen, das untere Ende des Bildes und nicht mehr die Mitte von td ist.

das ist meine Antwort:

wenn Sie tdvertical-align auf middle setzen, sollte nicht der gesamte Inhalt vertical-align auf middle gesetzt werden. Sie sind immer noch baseline. Wenn Sie dem Text ein Bild hinzufügen, steigt die Zeilenhöhe auf die Höhe von Bild und Text an. Diese Höhe befindet sich unten. Daher müssen Sie vertical-align auf middle setzen, um dieses Problem zu beheben.

hier kannst du sehen, was ich gesagt habe: DEMO

und entschuldige mein schlechtes Englisch

0
Mohsen Safari

Ich denke wir sind fast alle da 

td img,
td span {
display:inline-block;
vertical-align:middle;
}

scheint zu funktionieren.

Codepen-Beispiel

Oder fehlt mir etwas?

0
Paulie_D

Ist es das was du meinst? http://jsfiddle.net/JFVNq/

Der Grund ist, dass Spannweiten als Inline behandelt werden, daher müssen Sie sie blockieren.

CSS für die Spanne:

td.vert span
{
    vertical-align: middle;
    display: block;
}
0
andrewb