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

Jawaban:

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