How to absolutely position the baseline of text in HTML

后端 未结 4 1887
别跟我提以往
别跟我提以往 2021-01-17 19:23

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)
提交回复
热议问题