Gambar tengah di tabel td di CSS

101

Saya sudah mencoba untuk menyelaraskan gambar ke tengah td tabel. Ini berfungsi dengan mengatur margin-left ke nilai tertentu tetapi juga meningkatkan ukuran td juga dan itu bukan yang saya inginkan

Adakah cara yang efisien untuk melakukan ini? Saya menggunakan persentase untuk tinggi dan witdh tabel.

html css

— Terbaik
sumber

pertanyaan terkait: stackoverflow.com/questions/8639383/… Selain memberi induk (di sini td) gaya perataan teks: tengah, Anda mungkin harus memberi anak (di sini, img) gaya tampilan: blok atau tampilan : inline-block

— mathheadinclouds

177

<td align="center">

atau melalui css, yang merupakan metode yang lebih disukai lagi ...

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

— Scott
sumber

23

Catatan untuk OP ... gunakan opsi kedua Scott karena 'align' tidak didukung di HTML5 untuk selanjutnya

— isNaN1247

Jadi bagaimana kita bisa mengatasi HTML5?

— Terbaik

25

Anda tidak mengatasi HTML5 .. Anda beradaptasi dengannya. @beardtwizzle .. terima kasih telah menambahkannya.

— Scott

1

Bagaimana jika saya ingin itu berpusat dari atas juga

— Sohaib

11

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

— Scott

55

Cara sederhana untuk melakukannya untuk html5 di css:

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

}

Bekerja untuk saya dengan sempurna.

— Mohammed Gadiwala
sumber

Ini bekerja dengan sempurna; <td style = "text-align: center;"> tidak berfungsi, <td align = "center"> berfungsi, tetapi tidak didukung di HTML5

— user2431763

9

Pusatkan div di dalam td menggunakan margin, triknya adalah membuat lebar div sama dengan lebar gambar.

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

— Sistem Teratas
sumber

1

@Saike Tidak juga, <div>sebagian besar email dihapus dan tidak dianggap sebagai praktik yang baik.

— crmpicco

6

Ini memperbaiki masalah untuk saya:

<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
sumber

ini juga memperbaiki masalah untuk saya tetapi dalam tag gambar, bukan di tabel atau tag td

— Sumon Bappi

6

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

atau

td
{
    text-align:center;
}

di file CSS

— oqx
sumber

5

Setel tetap dengan gambar Anda di css Anda dan tambahkan auto-margin / padding pada gambar ke ...

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

Atau setel text-alignke tengah ...

td {
    text-align: center;
}

— Michiel
sumber

2

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

— aulianza
sumber

jawaban umum yang bagus

— Dan

0

Pilihan lain adalah penggunaan <th>bukan <td>. <th>default ke tengah; <td>default ke kiri.

— pengguna13731874
sumber

Saya telah memperbaikinya untuk Anda, tetapi di masa mendatang cukup gunakan backticks (`) di kedua sisi elemen HTML untuk memastikannya ditampilkan.

— Jeremy Caney

-6

Sesuai analisis dan pencarian saya di internet juga, saya tidak dapat menemukan cara untuk memusatkan gambar secara vertikal di tengah menggunakan <div>itu hanya mungkin menggunakan <table>karena tabel menyediakan properti berikut:

valign="middle"

— Kheteswar
sumber

3

Saran ini tidak disarankan karena tidak didukung di HTML5. Lebih baik menggunakan gaya atau kelas CSS dengan perataan vertikal: tengah diterapkan ke kolom atau wadah.

— mbokil