CSS Weise horizontal align Tabelle

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

Frage

Ich möchte in der Mitte des Browserfensters eine Tabelle mit fester Breite zeigen. Jetzt benutze ich 

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

Aber Visual Studio 2008 gibt auf dieser Linie Warnung:

Attribut 'align' gilt als veraltet. Ein neueres Konstrukt wird empfohlen.

Welche CSS-Stil soll ich auf die Tabelle gelte das gleiche Layout zu erhalten?

War es hilfreich?

Lösung

Steven ist richtig, in Theorie :

  

die „richtige“ Art und Weise eine Tabelle mit CSS zu zentrieren. Konforme Browser sollten Tabellen zu zentrieren, wenn die linken und rechten Rand gleich sind. „Auto“ Der einfachste Weg dies zu tun ist, um die linken und rechten Rand setzen somit ein in einem Stylesheet schreiben könnte: 

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

Aber der Artikel am Anfang dieser Antwort erwähnt gibt Ihnen alle anderen Weg, um einen Tisch zu zentrieren.

  

Eine eleganten CSS Cross-Browser-Lösung:   Dies funktioniert sowohl in MSIE 6 (Quirks und Standards), Mozilla, Opera und Netscape 4.x auch ohne explizite Breiten einstellen: 

div.centered 
{
    text-align: center;
}

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


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

Andere Tipps

Versuchen Sie folgendes: 

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

Einfach. IE6 und oben wird zentriert Tisch glücklich mit „margin: 0 auto;“ wenn nur macht die Seite in „Standards“ Modus. Um dies zu ermöglichen müssen Sie eine gültige DOCTYPE-Deklaration, wie 

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

oder 

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

True, IE 5.5 und unten wird noch weigern, den Tisch zu zentrieren, aber vielleicht kann man damit leben, vor allem, wenn die Seite noch funktionsfähig ist mit der Tabelle links ausgerichtet. Ich denke, jetzt Benutzer von IE 5.5 und unten ist ziemlich auf einige seltsam aussehenden Websites verwendet - aber Sie müssen noch um sicherzustellen, dass diese visuellen Störungen machen Ihre Website nicht unbrauchbar.

Happy Codierung!

EDIT: Sorry, ich sollte vielleicht darauf hinweisen, dass Sie nicht eine „strenge“ Doctype haben müssen IE6 zu bekommen und bis in die „Standards“ Rendering-Modus. Ich erkannte, es könnte auf diese Weise von den Doctype Beispiele scheinen ich oben geschrieben. Zum Beispiel wird diese Doctype Deklaration natürlich arbeitet gleich: 

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

Obwohl es Häresie in der heutigen Welt sein könnte - in der Vergangenheit Sie den folgenden nicht-CSS-Code tun würden. Dies funktioniert in allem bis einschließlich dem heutigen Browser aber - wie gesagt - es ist Ketzerei in der heutigen Welt: 

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

Was Sie brauchen, ist eine Art und Weise zu sagen, dass Sie eine Tabelle zentrieren mögen und die Person mit einem älteren Browser. Dann legen Sie das „

“ Befehle um den Tisch. Ansonsten -. CSS

Überraschenderweise - wenn Sie wollen, dass alles im Körperbereich zum Zentrum - Sie können nur den Standard verwenden 

text-align: center;

CSS-Befehl und in IE8 (zumindest) es alles auf der Seite inklusive Tabellen Zentrieren wird. 

style="text-align:center;"

(glaube ich)

oder Sie können es einfach ignorieren, es funktioniert immer noch

Dies sollte funktionieren: 

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

Ich lerne gerade das und was für mich schließlich arbeitete, war zunächst eine Tabelle mit drei Zeilen zu machen. Stellen Sie den Spielraum für den linken und rechten Reihen zu 50%. Dann legte eine einzige Reihe, feste Breite Tabelle innerhalb der „Tabellendaten“ von der Mitte „Tabellenzeile“. 

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

<table class="abc">
    <tr>
        <td>Item1</td>
        <td>Item2</td>
    </tr>
</table>
Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top