Hình ảnh chính giữa trong bảng td trong CSS

100

Tôi đang cố gắng căn chỉnh một hình ảnh vào tâm của bảng td. Nó hoạt động với việc đặt lề trái thành một giá trị cụ thể nhưng nó cũng làm tăng kích thước của td và đó không phải là chính xác những gì tôi muốn

Có cách nào hiệu quả để làm điều này không? Tôi đã sử dụng tỷ lệ phần trăm cho chiều cao và chiều cao của bảng.

html css

— Tốt
nguồn

câu hỏi liên quan: stackoverflow.com/questions/8639383/… Ngoài việc cung cấp cho cha mẹ (tại đây td) một kiểu text-align: center, bạn có thể phải cung cấp cho con (tại đây, img) một kiểu hiển thị: khối hoặc hiển thị : inline-block

— mathheadinclouds

176

<td align="center">

hoặc thông qua css, đó là phương pháp được ưa thích hơn nữa ...

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

— Scott
nguồn

23

Lưu ý để OP ... Lựa chọn thứ hai sử dụng của Scott là 'align' là không được hỗ trợ trong HTML5 đi về phía trước

— isNaN1247

Vậy làm thế nào chúng ta có thể vượt qua HTML5?

— Tốt nhất

25

Bạn không vượt qua được HTML5 .. bạn thích nghi với nó. @beardtwizzle .. cảm ơn vì đã thêm điều đó.

— Scott

1

Nếu tôi muốn nó làm trung tâm từ đầu cũng

— Sohaib

11

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

— Scott

55

Cách đơn giản để làm điều đó cho html5 trong css:

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

}

Làm việc cho tôi một cách hoàn hảo.

— Mohammed Gadiwala
nguồn

Nó hoạt động hoàn hảo; <td style = "text-align: center;"> không làm việc, <td align = "center"> Tác phẩm, nhưng không được hỗ trợ trong HTML5

— user2431763

9

Căn giữa một div bên trong td bằng cách sử dụng margin, mẹo là làm cho chiều rộng div bằng với chiều rộng hình ảnh.

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

— Hệ thống hàng đầu
nguồn

1

@Saike Không thực sự, <div>s bị loại khỏi hầu hết các email và không được coi là thông lệ tốt.

— crmpicco,

6

Vấn đề này đã khắc phục cho tôi:

<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
nguồn

điều này cũng đã khắc phục sự cố cho tôi nhưng trong thẻ hình ảnh, không phải trong bảng hoặc thẻ td

— Sumon Bappi

6

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

hoặc là

td
{
    text-align:center;
}

trong tệp CSS

— oqx
nguồn

5

Đặt cố định hình ảnh của bạn trong css của bạn và thêm auto-margin / padding trên hình ảnh để ...

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

Hoặc đặt text-aligntrung tâm ...

td {
    text-align: center;
}

— Michiel
nguồn

2

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

— aulianza
nguồn

câu trả lời chung chung tuyệt vời

— Dan

0

Một lựa chọn khác là sử dụng <th>thay vì <td>. <th>mặc định là trung tâm; <td>mặc định bên trái.

— người dùng13731874
nguồn

Tôi đã sửa lỗi đó cho bạn, nhưng trong tương lai, chỉ cần sử dụng dấu gạch ngược (`) ở hai bên của các phần tử HTML để đảm bảo chúng được hiển thị.

— Jeremy Caney

-6

Theo phân tích của tôi và tìm kiếm trên internet, tôi không thể tìm thấy cách căn giữa hình ảnh theo chiều dọc ở giữa bằng cách sử dụng <div>nó, chỉ có thể sử dụng <table>vì bảng cung cấp thuộc tính sau:

valign="middle"

— Kheteswar
nguồn

3

Đề xuất này không được khuyên dùng vì nó không được hỗ trợ trong HTML5. Tốt hơn nên sử dụng kiểu hoặc lớp CSS với vertical-align: middle áp dụng cho cột hoặc vùng chứa.

— mbokil