kann Tabelle in Firefox nicht zentrieren
Ich habe also diese zwei Tabellen
%Vor%Der erste ist in großen Bildschirmen sichtbar und der zweite, der kleinere, ist in kleineren Bildschirmen sichtbar.
Ihr CSS ist
%Vor%Ihr Wrap div hat
%Vor% In Firefox 45.0.1 ist die Tabelle links ausgerichtet, hat Rand: auto und kein Padding. Es gibt eine Lücke auf der rechten Seite zwischen der linken ausgerichteten Lücke und ihrem Container div .
Ich kann diese Tabelle pointsTableSmall nicht zentrieren. Wie kann ich das beheben?
Danke
Aktualisieren
Nun ist die Tabelle
%Vor% Jedes <td> hat Grafiken aus der progressbar.js -Bibliothek.
Das CSS ist
%Vor%Das Problem
In Firefox sitzt die Tabelle immer auf der linken Seite (siehe Bild, um Ihnen zu helfen). Ich weiß nicht, wie ich es zentriere. Ich habe es versucht
Ich habe die Tabelle mit bootstrap
div class="col-md-4"ersetzt, aber sie gehen auch bei mittleren Bildschirmgrößen ineinander über und sehen hässlich ausIch habe die Tabelle durch eine Flexbox ersetzt, die in kleinen Bildschirmen großartig ist, aber in mittleren Bildschirmen kleben sie kein Netz an das andere und sehen hässlich aus
Ich habe versucht,
margin-left,margin-rightfür die Tabellen und den Zeilenumbruch hinzuzufügen, aber nichts.
Bitte helfen Sie mir, diesen Tisch zu zentrieren
Danke
7 Antworten
In Ihrem Code sind ziemlich viele Dinge falsch.
Sie haben ein Komma zwischen class="heyT" und id="heyTS" in Ihrem HTML eingefügt, sowie einige unnötige Leerzeichen
In Ihrem CSS haben Sie alignment-adjust verwendet, was von keinem Browser unterstützt wird (denke ich?). Durch das Googlen der Property wurde die W3C- oder Mozilla-Spezifikation nicht angezeigt. Sie haben auch align-self und align-content verwendet, bei denen es sich um Flex-Box-Eigenschaften handelt. Sie verwenden keine Flex-Box in Ihrem Code. Sie verwenden auch align , das keine Bedeutung hat.
Dann gibt es den Ort, an dem Sie margin: 0 auto; anwenden, aber danach wenden Sie margin-left: 1%; und margin-right: 1%; an. Wenn Sie diese Regeln zusammen haben, erhalten Sie eine Marge von 0 1% 0 1% (0 oben und unten, 1% links und rechts).
Die Lösung für Ihr Problem
In dieser Geige siehst du, dass der Tisch eine Breite von 50% hat und dass er auf die Mitte ausgerichtet ist. Sie können die Breite von 50% entfernen und sie so klein wie möglich halten.
Ich habe nur den Container div entfernt, da er keinen Zweck erfüllt hat. Ich habe auch die Styles entfernt, die Sie auf #pointsTableSmall > tbody, #pointsTableSmall > tbody > tr angewendet haben, auch weil sie keinen Zweck erfüllt haben.
Im Grunde genommen war die Sache, die Sie daran hinderte, zentriert zu sein, weil der Tisch eine Breite von 100% hatte. Das einzige, was nötig ist, um eine Tabelle zu zentrieren, ist margin: 0 auto; und eine Breite, die nicht 100%
Hoffe, das hilft
Sehr oft finde ich, dass ich ein bisschen CSS verpasst habe, was entscheidend ist, wenn Margin: 0 auto; funktionieren kann. Es muss eine Breite haben. Es darf nicht links, rechts oder zentriert schweben. Es muss Block angezeigt werden. Sie dürfen dem Div keine feste Position geben.
Siehe hier: Was genau ist erforderlich für "margin: 0 auto;" arbeiten?
Das Problem ist, dass Sie Ihre eigenen Margenerklärungen außer Kraft setzen, mit:
%Vor%Der Code wird:
%Vor% Um die Tabelle in Medienabfragen zu verstecken, reicht es aus, display property zwischen block und none zu ändern.
a) Um die Tabelle zu zentrieren :
%Vor% b)
Beispiel: Ссылка
Ich habe vergessen zu erwähnen, dass die CSS von #pointsTableSmall hat display: none; und dann habe ich einige Medien-Abfragen geschrieben, um es in kleinen Bildschirmen sichtbar zu machen.
Also in meinen Medienabfragen tue ich
%Vor% Alles, was ich tun musste, ist, die CSS von #pointsTableSmall durch die zu ersetzen, die Gust van de Wal hier hier geschrieben hat.
Entfernen Sie die CSS vollständig von #pointsTableSmallWrap und #pointsTableSmall > tbody, #pointsTableSmall > tbody > tr und entfernen Sie die pointsTableSmallWrap div selbst.
Auch, und hier ist der Trick, ersetzen
%Vor%mit
%Vor% display: inline ist der Standardwert.
Das war der Trick. Dies. War. Der Trick. Nur ein einfacher Wert. Oh, ich liebe CSS.
Die Frage ist nicht klar, aber ich denke, Sie möchten Tabellenmitte statt Text ausrichten zentrieren so,
Kann sein, dass Ihre Tabelle float Eigenschaft in anderen CSS hat, deshalb zentriert Ihr Element nicht margin:auto; funktioniert nicht mit floted Element Wenn Sie zentrieren möchten, müssen Sie die Eigenschaft float entfernen.
Eine andere Lösung nehmen Sie ein anderes Element vor die Tabelle und verwenden Sie die Tabelle darin zum Beispiel
Html
%Vor%CSS
%Vor% Hinweis : In Ihrem Code verwenden Sie Margin property in tr . Die margin -Eigenschaft funktioniert nicht mit display:table display:table:cell; display : table-row see hier
Wenn Sie die innere Tabelle zentrieren möchten, egal was Sie tun, wenn Sie die Größe ändern, fügen Sie einfach dieses
hinzu-
margin-left:auto -
margin-right:auto
in die ID der spezifischen Tabelle, die Sie in der CSS wollen ...
Tags und Links css firefox vertical-alignment alignment