Imagem central na tabela td em CSS

100

Estou tentando alinhar uma imagem ao centro da mesa td. Funcionou definindo a margem esquerda para um valor específico, mas também aumentou o tamanho do td e não era exatamente o que eu queria

Existe alguma maneira eficiente de fazer isso? Usei porcentagens para a altura e a inteligência da mesa.

html css

— Melhor
fonte

questão relacionada: stackoverflow.com/questions/8639383/… Além de dar ao pai (aqui td) um estilo de text-align: center, você pode ter que dar ao filho (aqui, img) um estilo de display: block ou display : inline-block

— mathheadinclouds

176

<td align="center">

ou via css, que é o método preferido ainda ...

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

— Scott
fonte

23

Observação para OP ... usar a segunda opção de Scott, pois 'alinhar' não é compatível com HTML5 daqui para frente

— isNaN1247

Então, como podemos superar o HTML5?

— Melhor em

25

Você não supera o HTML5 ... você se adapta a ele. @beardtwizzle .. obrigado por adicionar isso.

— Scott

1

E se eu também quiser centralizado de cima para

— baixo

11

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

— Scott

55

Maneira simples de fazer isso para html5 em css:

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

}

Funcionou perfeitamente para mim.

— Mohammed Gadiwala
fonte

Funciona perfeitamente; <td style = "text-align: center;"> não funciona, <td align = "center"> funciona, mas não é compatível com HTML5

— user2431763

9

Centralize uma div dentro de td usando margin, o truque é fazer com que a largura do div seja igual à largura da imagem.

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

— Top Systems
fonte

1

@Saike Na verdade, os <div>s são retirados da maioria dos e-mails e não são considerados uma boa prática.

— crmpicco

6

Isso corrigiu os problemas para mim:

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

isso também corrigiu o problema para mim, mas na tag de imagem, não na tabela ou tag td

— Sumon Bappi

6

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

ou

td
{
    text-align:center;
}

no arquivo CSS

— oqx
fonte

5

Defina um com fixo de sua imagem em seu css e adicione uma auto-margin / padding na imagem para ...

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

Ou defina o text-alignpara centralizar ...

td {
    text-align: center;
}

— Michiel
fonte

2

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

— aulianza
fonte

ótima resposta genérica

— Dan

0

Outra opção é usar em <th>vez de <td>. <th>o padrão é centralizado; <td>o padrão é a esquerda.

— user13731874
fonte

Corrigi isso para você, mas no futuro apenas use crases (`) em ambos os lados dos elementos HTML para garantir que eles sejam exibidos.

— Jeremy Caney

-6

De acordo com minha análise e pesquisa na internet também, não consegui encontrar uma maneira de centralizar a imagem verticalmente centrada usando <div>isso só foi possível <table>porque a tabela fornece a seguinte propriedade:

valign="middle"

— Kheteswar
fonte

3

Esta sugestão não é aconselhável, pois não é compatível com HTML5. Melhor usar o estilo CSS ou classe com alinhamento vertical: meio aplicado à coluna ou recipiente.

— mbokil