How to absolutely position the baseline of text in HTML

后端未结

关注

 4  1889

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 a

相关标签:

4条回答

一生所求

2021-01-17 19:58

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).

0 讨论(0)

醉酒成梦

2021-01-17 20:08

jsFiddle Goofy (and crazy ugly/hacky), but it works.

<body>
    <div id="spacer"></div>
    <div id="text">
        <img src="http://placehold.it/10X100" id="baseline">css=powerful</div>
</body>

...

    body {
        margin: 0px;
    }

    #spacer {
        float: left;
        width: 190px;
        height: 100px;
        background-color: red;
    }
    #baseline {
        visibility: hidden;
    }
    #text {
        float: left;
        background-color: yellow;
        font-family: helvetica, arial; /* may vary */
        font-size: 60px;               /* may vary */
    }

Edit I guess, really, it's all about the image. So you could just simplify and use a transparent spacer gif. Still stupid hacky, I know. jsFiddle

0 讨论(0)

时光说笑

2021-01-17 20:10

Try this :

HTML :

<div id="text-holder">
 <div id="text-holder-position"></div>
 <div id="text">css=powerful</div>
</div>
<div id="heightJudger"></div>

CSS :

    BODY
{
    position: absolute;
    margin: 0px;
}
#text
{
    position: relative;
    margin-top:-0.938em;
    left:0px;
    font-family: helvetica, arial;
    font-size: 80px;

    /*You can remove this*/
    background: yellow;
    opacity: 0.5;

}
#text-holder
{
    position: absolute;
    height: 200px;
    left: 200px;
}

#text-holder-position {
    position: relative;
    height: 200px;
    width: 200px;
    background: green;
}

#heightJudger {
    position:absolute;
    height:200px; width:200px;
    background:red;
    top:0; left:0;
}

if you want to change the position, change the "height" and the "left" parameters of the #text-holder This way you will be able to control your basepoint position. I put the height judger and some color so you can see if it's what you exepct.

EDIT : Changed the #text margin unit to em. JSFiddle

0 讨论(0)

予麋鹿

2021-01-17 20:22

By default inline-block/inline and text in block are baseline vertical-aligned. Create an pseudo element inside the block you want to move in Y and defining the height of this spacer.

/**
Create a vertical spacer. It will be aligned with the parent's content baseline:
**/
.text::before{
  content: "";
  /*the Y value:*/
  height: 100px;
  width: 0px;
  display: inline-block;
}

/**
The rest (only for this demo)
**/
body{
  font-family: sans-serif;
  font-size: 60px;
  margin: 0;
}
body::before{
  content: "";
  display: block;
  position: absolute;
  top: 100px;
  width: 100%;
  height: 2px;
  margin: -1px 0;
  background-color: #00D500;
  z-index: 1;
}
body::after{
  content: "";
  display: block;
  position: absolute;
  top: 100px;
  left: 200px;
  height: 8px;
  width: 8px;
  margin: -4px;
  border-radius: 50%;
  background-color: #FF0077;
  z-index: 1;
}

.text {
  margin: 0;
  position: absolute;
  /*the X value:*/
  left: 200px;
}

<p class="text">css=powerful</p>

0 讨论(0)