CSS maneira de mesa horizontal align

StackOverflow https://stackoverflow.com/questions/301147

Pergunta

Eu quero mostrar uma tabela de largura fixa no centro da janela do navegador. Agora uso I 

<table width="200" align="center">

Mas Visual Studio 2008 dá aviso nesta linha:

O atributo 'alinhar' é considerada ultrapassada. Uma construção mais recente é recomendado.

O estilo CSS devo aplicar a tabela para obter o mesmo layout?

Foi útil?

Solução

Steven está certo, na teoria :

a maneira “correta” para centrar uma tabela utilizando CSS. Conformando navegadores deveriam mesas de centro, se as margens esquerda e direita são iguais. A maneira mais simples de conseguir isso é para definir as margens esquerda e direita para “auto”. Assim, pode-se escrever em uma folha de estilo: 

table
{ 
    margin-left: auto;
    margin-right: auto;
}

Mas o artigo mencionado no início desta resposta dá-lhe toda a outra maneira de centralizar uma tabela.

Uma solução cross-browser elegante css: Isso funciona tanto em MSIE 6 (peculiaridades e Normas), Mozilla, Opera e 4.x mesmo Netscape sem definir quaisquer larguras explícitas: 

div.centered 
{
    text-align: center;
}

div.centered table 
{
    margin: 0 auto; 
    text-align: left;
}


<div class="centered">
    <table>
    …
    </table>
</div>

Outras dicas

Tente isto: 

<table width="200" style="margin-left:auto;margin-right:auto">

Simples. IE6 e acima terá todo o prazer centrar sua mesa com "margin: 0 auto;" Se apenas a página é processada no modo "padrões". Para que isso aconteça é necessário uma declaração doctype válido, como 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

ou 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

É verdade, IE5.5 e abaixo ainda se recusam a centrar a mesa, mas talvez você possa viver com isso, especialmente se a página ainda é funcional com a tabela alinhado à esquerda. Acho que agora os usuários do IE 5.5 e abaixo são bastante usados ??para alguns sites que procuram ímpares - mas você ainda precisa para garantir que as falhas visuais não tornam seu site inutilizável.

Happy codificação!

EDIT: Desculpe, eu deveria talvez salientar que você não tem que ter um doctype "rigorosa" para obter IE6 e até para "padrões" modo de renderização. Percebi pode parecer que maneira a partir dos exemplos doctype que eu postei acima. Por exemplo, esta declaração doctype, evidentemente, trabalhar igualmente: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Embora possa ser heresia no mundo de hoje - no passado, você faria o seguinte código não-css. Isso funciona em tudo até e incluindo navegadores de hoje, mas - como já disse - é heresia no mundo de hoje: 

<center>
<table>
   ...
</table>
</center>

O que você precisa é alguma maneira de dizer que você deseja centralizar uma mesa e a pessoa está usando um navegador mais antigo. Em seguida, inserir o "

" comandos ao redor da mesa. Caso contrário -. Uso css

Surpreendentemente - se você quiser tudo o centro na área do corpo - você só pode usar o padrão 

text-align: center;

comando css e no IE8 (pelo menos) que vai centralizar tudo na página, incluindo tabelas. 

style="text-align:center;"

(eu acho)

ou você pode simplesmente ignorá-lo, ele ainda funciona

Isso deve funcionar: 

<div style="text-align:center;">
  <table style="margin: 0 auto;">
    <!-- table markup here. -->
  </table>
</div>

Estou aprendendo isso e que finalmente funcionou para mim foi primeiro fazer uma tabela com três linhas. Defina a margem para as linhas esquerda e direita para 50%. Em seguida, coloque uma única linha, dentro da tabela de largura fixa dos "dados da tabela" do centro "linha da tabela". 

<style>
    .abc {
        text-align: center;
    }
</style>

<table class="abc">
    <tr>
        <td>Item1</td>
        <td>Item2</td>
    </tr>
</table>
Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top