相关疑难解决方法(0)

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

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

一张图

所以我基本上想要控制图中点(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>
Run Code Online (Sandbox Code Playgroud)

那么我应该如何修改这段代码呢?我应该使用封闭DIV的vertical-align属性吗?(我尝试过,但无法得到理想的结果).

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

html css

9
推荐指数
1
解决办法
1688
查看次数

将文本保持垂直居中在画布上

我遇到的问题是保持用户输入的文本在canvas元素中垂直居中.我已经构建了一个测试环境来尝试解决这个问题,我在这篇文章中提供了一个小提琴.这是我的代码:

HTML:

Enter Your Text: <br/>
<textarea id="inputtextuser" onkeyup="inputtextgo()" name="Text">Enter Your</textarea> <br/>
TextBaseline: 
<select id="inputtextbaseline" onchange="inputtextgo()";> 
    <option value="alphabetic">alphabetic</option>
    <option value="top">top</option>
    <option value="bottom">bottom</option>
    <option value="middle">middle</option>
    <option value="hanging">hanging</option>
</select> <br/>
<canvas id="canvas1"  width="300px" height="200px" >Your browser does not support the HTML5 canvas tag.</canvas> <br/>
<div id ="textheightentered"></div>
Run Code Online (Sandbox Code Playgroud)

CSS:

canvas {
    border: solid 1px black;
}
Run Code Online (Sandbox Code Playgroud)

的JavaScript/jQuery的:

//Declaring the Canvas
var canvas1 = document.getElementById('canvas1');
context1 = canvas1.getContext('2d');

//running the function to update the canvas
 inputtextgo();

function inputtextgo() {
    //Retrieving the text entered by …
Run Code Online (Sandbox Code Playgroud)

javascript jquery html5 canvas html5-canvas

5
推荐指数
1
解决办法
1312
查看次数

标签 统计

canvas ×1

css ×1

html ×1

html5 ×1

html5-canvas ×1

javascript ×1

jquery ×1