Bild in Tabelle td in CSS zentrieren

100

Ich habe versucht, ein Bild in der Mitte der Tabelle td auszurichten. Es funktionierte mit dem Setzen von margin-left auf einen bestimmten Wert, aber es vergrößerte auch td und das ist nicht genau das, was ich wollte

Gibt es dafür effiziente Möglichkeiten? Ich habe Prozentsätze für die Höhe und das Gewicht der Tabelle verwendet.

html css

— Beste
quelle

Verwandte Frage: stackoverflow.com/questions/8639383/… Abgesehen davon, dass Sie dem Elternteil (hier td) einen Stil für Textausrichtung : Mitte geben, müssen Sie dem Kind (hier img) möglicherweise einen Anzeigestil geben: Block oder Anzeige : Inline-Block

— Mathheadinclouds

176

<td align="center">

oder über CSS, was die bevorzugte Methode nicht mehr ist ...

<td style="text-align: center;">

— Scott
quelle

23

Hinweis für OP ... verwenden Sie Scotts zweite Option, da 'align' in HTML5

— künftig

Wie können wir HTML5 überwinden?

— Beste

25

Sie überwinden HTML5 nicht. Sie passen sich daran an. @beardtwizzle .. danke für das Hinzufügen.

— Scott

1

Was ist, wenn ich möchte, dass es auch von oben zentriert wird

— Sohaib

11

@ SilentPro<td style="text-align: center; vertical-align: middle;">

— Scott

54

Einfache Möglichkeit, dies für HTML5 in CSS zu tun:

td img{
    display: block;
    margin-left: auto;
    margin-right: auto;

}

Hat perfekt für mich funktioniert.

— Mohammed Gadiwala
quelle

Es funktioniert perfekt; <td style = "text-align: center;"> funktioniert nicht, <td align = "center"> funktioniert, wird aber in HTML5 nicht unterstützt

— user2431763

9

Zentrieren Sie ein Div innerhalb von td mit dem Rand. Der Trick besteht darin, die Div-Breite an die Bildbreite anzupassen.

<td>
    <div style="margin: 0 auto; width: 130px">
          <img src="me.jpg" alt="me" style="width: 130px" />
    </div>
</td>

— Top-Systeme
quelle

1

@Saike Nicht wirklich, <div>s werden aus den meisten E-Mails entfernt und gelten nicht als bewährte Methode .

— Crmpicco

6

Dies hat Probleme für mich behoben:

<style>
.super-centered {
    position:absolute; 
    width:100%;
    height:100%;
    text-align:center; 
    vertical-align:middle;
    z-index: 9999;
}
</style>

<table class="super-centered"><tr><td style="width:100%;height:100%;" align="center"     valign="middle" > 
<img alt="Loading ..." src="/ALHTheme/themes/html/ALHTheme/images/loading.gif">
</td></tr></table>

— Kheteswar
quelle

Dies hat auch ein Problem für mich behoben, aber im Bild-Tag, nicht in der Tabelle oder im td-Tag

— Sumon Bappi

6

<table style="width:100%;">
<tbody ><tr><td align="center">
<img src="axe.JPG" />
</td>
</tr>
</tbody>
</table>

oder

td
{
    text-align:center;
}

in der CSS-Datei

— oqx
quelle

5

autoLegen Sie ein festes mit Ihres Bildes in Ihrem CSS fest und fügen Sie einen Rand / Abstand zum Bild hinzu, um ...

div.image img {
    width: 100px;
    margin: auto;
}

Oder setzen Sie die text-alignauf Mitte ...

td {
    text-align: center;
}

— Michiel
quelle

2

td image 
{
    display: block;
    margin-left: auto;
    margin-right: auto;
}

— Aulianza
quelle

tolle generische Antwort

— Dan

0

Eine andere Option ist die Verwendung <th>anstelle von <td>. <th>Standardmäßig zentriert; <td>Standardmäßig links.

— user13731874
quelle

Ich habe das für Sie behoben, aber in Zukunft verwenden Sie einfach Backticks (`) auf beiden Seiten der HTML-Elemente, um sicherzustellen, dass sie angezeigt werden.

— Jeremy Caney

-6

Gemäß meiner Analyse und Suche auch im Internet konnte ich keine Möglichkeit finden, das Bild vertikal zu zentrieren, <div>da dies nur möglich war, <table>da die Tabelle die folgende Eigenschaft aufweist:

valign="middle"

— Kheteswar
quelle

3

Dieser Vorschlag wird nicht empfohlen, da er in HTML5 nicht unterstützt wird. Besser CSS-Stil oder -Klasse mit vertikaler Ausrichtung verwenden: Mitte auf Spalte oder Container angewendet.

— Mbokil