Centra allinea una tabella HTML

Question

In una pagina su cui sto lavorando al momento, non riesco a essere in grado di centrare un tavolo con un'immagine nella prima riga e due colonne di testo sotto di esso (i due le colonne non devono essere superiori alla larghezza dell'immagine) Ecco la pagina: http://www.puzzles-et-jeux.com/fr/page/minipuzzles.html Ho passato molto tempo a cercare di risolvere questo problema. Mi piacerebbe tenerlo in HTML perché devo correre e anche perché devo creare 20 pagine del genere con diverse larghezze/+ layout per ogni immagine.

Answer 1

Per il vostro disegno, è pratica comune utilizzare div piuttosto che un tavolo. In questo modo, il layout sarà più manutenibile e modificabile attraverso uno stile adeguato. Ci vuole un po 'per abituarsi, ma a lungo andare ti aiuterà tantissimo e imparerai molto su come funziona lo styling. Tuttavia, ti fornirò una soluzione al problema in questione.

Nei fogli di stile i margini e il riempimento sono impostati su 0 pixel. Questo sovrascrive l'attributo align="center". Consiglierei di prendere queste impostazioni dal tuo CSS in quanto normalmente non vuoi che tutti i tuoi elementi siano influenzati in questo modo. Se sai già cosa sta succedendo nel CSS e vuoi mantenerlo in quel modo, devi applicare uno stile alla tua tabella per sovrascrivere i set precedenti. Puoi dare al tavolo uno class oppure puoi mettere lo stile in linea con l'HTML. Qui ci sono le due opzioni:

1. con una classe:

   <table class="centerTable"></table>

Nel file style.css si dovrebbe avere qualcosa di simile:

.centerTable { margin: 0px auto; } 

2. In linea con il codice HTML:

   <table style="margin: 0px auto;"></table>

Se si decide di cancellare i margini e padding essere impostato su 0px, allora è possibile mantenere align="center" sulle <td> tag per qualsiasi colonna che si desidera allineare.

Answer 2

Prova questa -

<table align="center" style="margin: 0px auto;"></table> 

Answer 3

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

Questo funzionerà sicuramente. Acclamazioni

Answer 4

<table align="center"></table> 

Questo funziona per me.