Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to absolutely position the baseline of text in HTML

Tags:

html

css

I'm puzzled by the following problem. I wish to (absolutely) position the baseline of some piece of HTML text at a certain y-coordinate, while the text should be starting at a certain x-coordinate. The following diagram clearly demonstrates the issue.

a diagram

So I basically want to control where the point (x,y), henceforth called the "basepoint", in the diagram is located on the screen, relative to the top-left corner of the BODY of the document or some DIV. Important: I don't know beforehand what the font-family or font-size of the text is. This is important, because I don't want to change all the positions in my CSS whenever I change fonts.

In the following code, I try to position the basepoint at (200,100), but instead it positions the top-left of the DIV at that point.

<html>
    <style>
        BODY
        {
            position: absolute;
            margin: 0px;
        }

        #text
        {
            position: absolute;
            top: 100px;
            left: 200px;

            font-family: helvetica, arial; /* may vary */
            font-size: 80px;               /* may vary */
        }
    </style>
    <body>
        <div id="text">css=powerful</div>
    </body>
</html>

So how should I modify this code? Should I use the vertical-align property of the enclosing DIV? (I tried, but couldn't get the desired result).

Thanks for any useful replies.

like image 368
peter p Avatar asked Dec 07 '13 15:12

peter p


People also ask

What is absolute position HTML?

An absolutely positioned element is an element whose computed position value is absolute or fixed . The top , right , bottom , and left properties specify offsets from the edges of the element's containing block. (The containing block is the ancestor relative to which the element is positioned.)

How do I position text at the bottom of a page in HTML?

Use the text-align property to align the inner content of the block element. Use the bottom and left properties. The bottom property specifies the bottom position of an element along with the position property. The left property specifies the left position of an element along with the position property.


1 Answers

Hacky solution based on this blog post.

HTML:

<body>
  <div id="text">css=powerful</div>
</body>

CSS:

body {
  margin: 0;
}
#text {
  font-size: 30px;
  line-height: 0px;
  margin-left: 100px;
}
#text:after {
  content: "";
  display: inline-block;
  height: 120px;
}

JsFiddle. The basepoint is aligned to (100, 120).

like image 90
psmith Avatar answered Oct 06 '22 22:10

psmith