Ich versuche, den effektivsten Weg zu finden, um Text mit einem Div auszurichten. Ich habe ein paar Dinge ausprobiert und keines scheint zu funktionieren.
.testimonialText {
position: absolute;
left: 15px;
top: 15px;
width: 150px;
height: 309px;
vertical-align: middle;
text-align: center;
font-family: Georgia, "Times New Roman", Times, serif;
font-style: italic;
padding: 1em 0 1em 0;
}
<div class="testimonialText">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
html
css
vertical-alignment
Shinjuo
quelle
quelle
Antworten:
Vertikale Zentrierung in CSS
http://www.jakpsatweb.cz/css/css-vertical-center-solution.html
Artikelübersicht:
Für einen CSS 2-Browser kann man
display:table
/ verwenden,display:table-cell
um Inhalte zu zentrieren.Ein Beispiel ist auch bei JSFiddle erhältlich :
Es ist möglich, Hacks für alte Browser (Internet Explorer 6/7) zu Stilen zusammenzuführen, indem
#
Stile vor neueren Browsern ausgeblendet werden:quelle
table
obwohl ich CSS-Fanboys routinemäßig das Herz gebrochen habe. Die meisten von ihnen entwerfen nur einfache Blogs und statische Websites. Einige von uns erstellen Unternehmenssoftware und benötigen eine dichte Datenanzeige. Unsere Benutzer legen mehr Wert auf Funktionalität.table
. Die Dinge sind jetzt besser, aber einige von uns, die Business-Web-Apps erstellen, müssen ältere Browser unterstützen (IE6 wird bei einigen Kunden immer noch verwendet!), Während Leute, die Blogs erstellen, in den Clouds leben und so tun können, als ob jeder auf der Welt eine hat schnelle Verbindung, neue Computer, und die neueste Version von X - Browser mit CSS 3 usw. Typischer Fall: einige Jira Plugins einreihige Tabellen für das Layout (oder taten sowieso)Sie müssen das
line-height
Attribut hinzufügen und dieses Attribut muss mit der Höhe des übereinstimmendiv
. In Ihrem Fall:In der Tat könnten Sie das
height
Attribut wahrscheinlich ganz entfernen .Dies funktioniert jedoch nur für eine Textzeile. Seien Sie also vorsichtig.
quelle
Hier ist eine großartige Ressource
Von http://howtocenterincss.com/ :
Flexbox verwenden
Um diesen Beitrag auf dem neuesten Stand der Technik zu halten, ist dies eine viel einfachere Möglichkeit, etwas mit Flexbox zu zentrieren. Flexbox wird in Internet Explorer 9 und niedriger nicht unterstützt .
Hier sind einige großartige Ressourcen:
JSFiddle mit Browserpräfixen
Eine andere Lösung
Dies ist von null bis sechs und ermöglicht es Ihnen, alles mit sechs Zeilen CSS zu zentrieren
Diese Methode wird in Internet Explorer 8 und niedriger nicht unterstützt .
jsfiddle
Vorherige Antwort
Ein einfacher und browserübergreifender Ansatz, der nützlich ist, da Links in der markierten Antwort etwas veraltet sind.
Andy Howard - Wie man Text in einer ungeordneten Liste oder Div vertikal und horizontal zentriert
Da mir Internet Explorer 7/6 für das letzte Projekt, an dem ich gearbeitet habe, nicht besonders wichtig war, habe ich eine etwas abgespeckte Version verwendet (dh das Material entfernt, das es in Internet Explorer 7 und 6 zum Laufen gebracht hat). Es könnte für jemand anderen nützlich sein ...
JSFiddle
quelle
height: x; line-height: x;
immer noch die Verwendung, aber meistens brauche ich nicht mehrere Textzeilen. Deshalb liebe ich diese Lösung. Einfach, wiederverwendbar, browserübergreifend, kein js und erfordert nur ein kleines zusätzliches Markup.height: 100px;
umheight: 100%;
sowohl für dieli
und für.outerContainer
.Es ist einfach mit
display: flex
. Bei der folgenden Methode wird der Text indiv
vertikal zentriert:Und wenn Sie wollen, horizontal:
Sie müssen die gewünschte Browserversion sehen. In alten Versionen funktioniert der Code nicht.
quelle
text-align: center
ist auch notwendig, weil langeIch verwende Folgendes, um zufällige Elemente leicht vertikal zu zentrieren:
HTML:
CSS:
Dadurch wird der Text in my
div
genau auf die vertikale Mitte eines 200 Pixel hohen Äußeren zentriertdiv
. Beachten Sie, dass Sie möglicherweise ein Browserpräfix verwenden müssen (wie-webkit-
in meinem Fall), damit dies für Ihren Browser funktioniert.Dies funktioniert nicht nur für Text, sondern auch für andere Elemente.
quelle
position: absolute;
- Danke! NB Vielleicht möchten Sie aufgenommen werden,-ms-transform
oder der IE stopft etwas anderes auf-web-kit-transform
vorher zu setzentransform
. Vielleicht-ms-transform
kann das Hinzufügen das Problem von @ ToniMichelCaubet lösen.Sie können dies tun, indem Sie die Anzeige auf 'Tabellenzelle' setzen und Folgendes anwenden
vertical-align: middle;
:Dies wird jedoch nicht von allen Versionen von Internet Explorer gemäß diesem Auszug unterstützt, den ich ohne Erlaubnis von http://www.w3schools.com/cssref/pr_class_display.asp kopiert habe .
Hinweis: Die Werte "Inline-Tabelle", "Tabelle", "Tabellenbeschriftung", "Tabellenzelle", "Tabellenspalte", "Tabellenspaltengruppe", "Tabellenzeile", "Tabellenzeile" -group "und" inherit "werden von Internet Explorer 7 und früheren Versionen nicht unterstützt. Internet Explorer 8 erfordert einen! DOCTYPE. Internet Explorer 9 unterstützt die Werte.
Die folgende Tabelle zeigt die zulässigen Anzeigewerte auch von http://www.w3schools.com/cssref/pr_class_display.asp .
quelle
In diesen Tagen (wir brauchen Internet Explorer 6-7-8 nicht mehr) würde ich nur CSS
display: table
für dieses Problem (oderdisplay: flex
) verwenden.Für ältere Browser:
Tabelle:
Biegen:
Dies ist (eigentlich war) meine Lieblingslösung für dieses Problem (einfach und sehr gut vom Browser unterstützt):
quelle
Versuchen Sie dies, fügen Sie das übergeordnete div hinzu:
quelle
Hier ist eine Lösung, die am besten für eine einzelne Textzeile funktioniert.
Es kann auch für mehrzeiligen Text mit einigen Anpassungen verwendet werden, wenn die Anzahl der Zeilen bekannt ist.
Hier ist eine JSFiddle .
quelle
quelle
Sie können den mittleren Text mit Flexbox vertikal innerhalb eines Divs ausrichten.
Weitere Informationen finden Sie unter Ein vollständiger Leitfaden für Flexbox .
quelle
Überprüfen Sie diese einfache Lösung:
HTML
CSS
JSFiddle
quelle
Es gibt eine einfachere Möglichkeit, den Inhalt vertikal auszurichten, ohne auf Tabelle / Tabellenzelle zurückzugreifen:
http://jsfiddle.net/bBW5w/1/
Darin habe ich ein unsichtbares (width = 0) div hinzugefügt, das die gesamte Höhe des Containers annimmt.
Es scheint in Internet Explorer und Firefox (neueste Versionen) zu funktionieren. Ich habe nicht mit anderen Browsern nachgefragt
Und natürlich das CSS:
quelle
Dies ist die sauberste Lösung, die ich gefunden habe (Internet Explorer 9+) und fügt eine Korrektur für das Problem "Aus um 0,5 Pixel" hinzu, indem
transform-style
andere Antworten verwendet werden, die weggelassen wurden.Quelle: Richten Sie alles vertikal mit nur 3 CSS-Zeilen aus
quelle
Eine einfache Lösung für ein Element, bei dem Werte nicht bekannt sind:
HTML
CSS
quelle
Nach der Antwort von Adam Tomat wurde ein JSFiddle- Beispiel vorbereitet , um den Text in div auszurichten :
mithilfe von display: flex in CSS:
mit einem anderen Beispiel und ein paar Erklärungen in einem Blog-Beitrag .
quelle
Margin Auto auf einem Gitterelement.
Ähnlich wie bei Flexbox zentriert das automatische Anwenden des Randes auf ein Rasterelement beide Achsen:
quelle
Flexbox funktionierte perfekt für mich und zentrierte mehrere Elemente innerhalb des übergeordneten Div horizontal und vertikal.
HTML Quelltext:
CSS-Code: Der folgende
Code stapelt alle Elemente innerhalb von parent-div in einer Spalte und zentriert die Elemente horizontal und vertikal. Ich habe das child-div verwendet, um die beiden Anchor-Elemente in derselben Zeile (Zeile) zu halten. Ohne Child-Div sind alle drei Elemente (Anchor, Anchor & Paragraph) in der Spalte des Parent-Div übereinander gestapelt. Hier ist nur child-div in der parent-div-Spalte gestapelt.
quelle
Verwenden:
Mit diesem Trick können Sie alles ausrichten, wenn Sie es nicht zentrieren möchten. Fügen Sie "left: 0" hinzu, um links auszurichten.
quelle
HTML
CSS
quelle
Seien Sie bei der Verwendung von Flex vorsichtig mit Unterschieden beim Rendern von Browsern.
Dies funktioniert sowohl für Chrome als auch für Internet Explorer gut:
Vergleichen Sie mit diesem, der nur mit Chrome funktioniert:
quelle
Dies ist eine weitere Variante des
div
in einemdiv
Muster unter Verwendungcalc()
in CSS.Das funktioniert, weil:
position:absolute
zur präzisen Platzierungdiv
innerhalb einesdiv
div
weil wir es eingestellt haben20px
.calc(50% - 10px)
für 50% - die Hälfte der Höhe zum Zentrieren des Innerendiv
quelle
Das funktioniert gut:
HTML
Sass
Ohne und mit dem Bild-Tag
<mat-icon>
(das ist eine Schriftart).quelle
Hmm, es gibt offensichtlich viele Möglichkeiten, dies zu lösen.
Aber ich habe eine
<div>
, die absolut positioniert istheight:100%
(tatsächlichtop:0;bottom:0
und mit fester Breite) unddisplay:table-cell
einfach nicht funktioniert hat, um Text vertikal zu zentrieren. Meine Lösung erforderte ein inneres Span-Element, aber ich sehe, dass viele der anderen Lösungen dies auch tun, also könnte ich es genauso gut hinzufügen:Mein Container ist a
.label
und ich möchte, dass die Nummer vertikal zentriert ist. Ich habe es getan, indem ich absolut positionierttop:50%
und eingestellt habeline-height:0
Und das CSS lautet wie folgt:
Sehen Sie es in Aktion: http://jsfiddle.net/jcward/7gMLx/
quelle
Sie können CSS verwenden
flexbox
.quelle
Die Verwendung des CSS-Rasters hat es für mich getan:
quelle
Versuchen Sie, ein Tabellenelement einzubetten.
quelle
Es gibt verschiedene Tricks , um Inhalte oder Bilder in der Mitte eines Div anzuzeigen. Einige der Antworten sind wirklich nett und ich stimme auch diesen voll und ganz zu.
Absolute horizontale und vertikale Zentrierung in CSS
http://www.css-jquery-design.com/2013/12/css-techniques-absolute-horizontal-and-vertical-centering-in-css/
Es gibt mehr als 10 Techniken mit Beispielen . Jetzt liegt es an Ihnen, was Sie bevorzugen.
Kein Zweifel,
display:table; display:table-Cell
ist ein besserer Trick.Einige gute Tricks sind die folgenden:
Trick 1 - Mit
display:table; display:table-cell
HTML
CSS-Code
Trick 2 - Mit
display:inline-block
HTML
CSS-Code
Trick 3 - Mit
position:relative;position:absolute
quelle
CSS:
Fügen Sie diese Klasse dem Element hinzu, das die Elemente enthält, die Sie vertikal ausrichten möchten
quelle
Wenn Sie mit der
min-height
Eigenschaft verwenden müssen, müssen Sie dieses CSS hinzufügen auf:quelle