CSS wie die position element in der Hälfte der Höhe (vertikal 50%)
Ich freue mich auf bauen Sie eine QuickInfo, die positioniert ist, neben dem element. Es ist einfach, um es über und unter der Mitte des Elements. Aber gibt es eine Möglichkeit, dies zu tun senkrecht (auf der rechten oder linken Seite des Elementes vertikal positioniert in der Mitte des elements Höhe)?
Für meinen Zweck, Höhe des Elements bekannt ist & die Höhe des tooltip ist nicht. Und die QuickInfo kann ein Kind-element.
Aber ich bin auch neugierig, wie es zu tun, wenn beide Höhen sind unbekannt. Von Höhen ich verstehe Elements und tooltip die Höhe. Breite bekannt und behoben.
- Haben Sie die Antwort?
- Nope, weder von unten zu mir passt
- Pflege zu erarbeiten?
- Werfen Sie einen Blick auf meine Antwort weiter unten: stackoverflow.com/a/32250727/491044
- Wenn die Antwort unter die Frage beantwortet, markiere es als beantwortet, helfen Sie anderen Anwendern. Danke.
- Etwas mehr Präzision in dieser Frage
- Ich fügte hinzu, mehr Beispiele zu den codepen, auf den verwiesen wird.
Du musst angemeldet sein, um einen Kommentar abzugeben.
Dies ist ziemlich spät, aber ich habe versucht, ein Beispiel auf codepen was zeigt ein funktionierendes Beispiel, wenn ich deine Frage verstanden richtig.
http://codepen.io/trgraglia/pen/RWbKyj
CSS transform.
Beispielsweise
transform:translateX(-50%);
wird, verschieben Sie ein element Links von 50% von sich SELBST. Sie können jetzt richten Sie es an den Eltern mitposition
undbottom
odertop
oderleft
oderright
und dann verschieben Sie es, indem Sie die Dimensionen des selbst.Hoffe, das hilft!
mit CSS & jQuery-
CSS
jQuery
Wenn Sie nicht wissen, die beiden Höhen, gibt es nur zwei Möglichkeiten:
display: table
und Kinderdisplay: table-cell
undvertical-align: middle
.Wenn Sie an diesem Thema interessiert sind, hier ist ein guter Artikel mit noch mehr Tipps:
http://www.vanseodesign.com/css/vertical-centering/
Wie Sie sehen können, der einzige Weg, um vertikal ausrichten-ein element, ohne zu wissen, seine Höhe und auch mit CSS3 ist mit
display: table-cell
.Wenn Sie wissen, die Höhe des Inhalts der einfachste Weg, um die Mitte der tooltip ist, um die
line-height
der tooltip für die Höhe der Inhalte.Sie können sehen, wie ich Tat, dass hier jsFiddle