So positionieren Sie die Grundlinie von Text absolut in HTML

Question

So positionieren Sie die Grundlinie von Text absolut in HTML

8

Ich bin verwirrt über das folgende Problem. Ich möchte (absolut) die Grundlinie irgendeines Stückes HTML-Text an einer bestimmten y-Koordinate positionieren, während der Text an einer bestimmten x-Koordinate beginnen sollte. Das folgende Diagramm zeigt deutlich das Problem.

Also möchte ich im Grunde kontrollieren, wo der Punkt (x, y), der im Folgenden als "Basispunkt" bezeichnet wird, im Diagramm auf dem Bildschirm relativ zur oberen linken Ecke des BODY des Dokuments oder eines DIV liegt . Wichtig: Ich weiß nicht im Voraus, was die Schriftfamilie oder Schriftgröße des Textes ist. Dies ist wichtig, weil ich nicht alle Positionen in meinem CSS ändern möchte, wenn ich die Schriftarten ändere.

Im folgenden Code versuche ich, den Basispunkt auf (200,100) zu positionieren, aber stattdessen positioniert er den oberen linken Teil des DIV an diesem Punkt.

%Vor%

Wie soll ich diesen Code ändern? Sollte ich die Eigenschaft der vertikalen Ausrichtung des einschließenden DIV verwenden? (Ich habe es versucht, konnte aber nicht das gewünschte Ergebnis erzielen).

Danke für alle nützlichen Antworten.

html css

peter p 07.12.2013, 15:44

quelle

4 Antworten

Tags und Links html css

Django: Verwenden von Annotate, Count und Distinct in einem Queryset $ this-getRequest () - getPost () gibt ein leeres Array im Magento-Back-End-Formular zurück

score 3 · Answer 1

3

Hacky-Lösung basiert auf diesem Blogpost .

HTML:

%Vor%

CSS:

%Vor%

JsFiddle . Der Basispunkt ist auf (100, 120) ausgerichtet.

psmith 07.04.2016 14:16

quelle

score 2 · Answer 2

2

jsFiddle Goofy (und verrückt hässlich / hacky), aber es funktioniert.

%Vor%

...

%Vor%

Bearbeiten Ich denke, es geht wirklich um das Image. So können Sie einfach ein transparentes Spacer-GIF vereinfachen und verwenden. Immer noch blöd, ich weiß. jsFiddle

keyboardSmasher 07.12.2013 19:13

quelle

score 1 · Answer 3

1

Standardmäßig sind Inline-Block / Inline und Text in Block Basislinien vertikal ausgerichtet. Erstellen Sie ein Pseudoelement innerhalb des Blocks, den Sie in Y verschieben möchten, und definieren Sie die Höhe dieses Abstandshalters.

%Vor% %Vor%

mems 07.04.2016 12:21

quelle

score 1 · Answer 4

Versuchen Sie Folgendes:

HTML:

%Vor%

CSS:

%Vor%

Wenn Sie die Position ändern möchten, ändern Sie die Parameter "Höhe" und "links" von #text-holder Auf diese Weise können Sie Ihre Basisposition steuern. Ich gebe die Höhe Judger und etwas Farbe, so dass Sie sehen können, ob es das ist, was Sie erwarten.

BEARBEITEN: Die # Text-Randeinheit wurde in em geändert. JSFiddle