Question

我对以下问题感到困惑。我希望（绝对）将某些HTML文本的基线定位在某个y坐标处，而文本应该从某个x坐标开始。下图清楚地说明了这个问题。

a diagram

所以我基本上想控制图中点（x，y）（以下称为“基点”）位于屏幕上的位置，相对于文档BODY的左上角或某些DIV 。重要提示：我事先不知道文本的字体大小或字体大小。这很重要，因为每当我更改字体时，我都不想改变CSS中的所有位置。

在下面的代码中，我尝试将基点定位在（200,100），但是它将DIV的左上角定位在该点。

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

那么我应该如何修改这段代码呢？我应该使用封闭DIV的vertical-align属性吗？（我尝试过，但无法得到理想的结果）。

感谢您提供任何有用的回复。

Answer 1

基于this blog post的Hacky解决方案。

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。基点与（100,120）对齐。

Answer 2

jsFiddle高飞（和丑陋/丑陋），但它确实有效。

<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 */
    }

修改的我想，真的，这都是关于图像的。所以你可以简化并使用透明的间隔gif。我知道，仍然是愚蠢的hacky。 jsFiddle

Answer 3

试试这个：

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;
}

如果要更改位置，请更改#text-holder的“高度”和“左”参数这样您就可以控制基点位置。我把高度判断器和一些颜色放在一起，这样你就能看出它是不是你所看到的。

编辑：将#text边距单位更改为em。 JSFiddle

Answer 4

默认情况下，内联块/内联和块中的文本是基线垂直对齐的。在要在Y中移动的块内创建一个伪元素，并定义此间隔符的高度。

＆＃13;

/**
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;
}

＆＃13;

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

＆＃13;

如何在HTML中绝对定位文本基线

4 个答案: