在其父级内自由移动文本

时间:2014-05-07 16:07:56

标签: css pixel

我是CSS的新手。

有没有办法在以下范围中移动文字,如非重复的背景图片

例如:左起50px,左起40px?没有造成额外的高度和宽度!

div{
width: 300px;
height: 300px;
border: 1px solid black;
}

<body>
<div>
<span>Hello World</span>
</div>
</body>

我可以提出更多问题吗? 16px角色占用多少空间?我的意思是16px是什么意思? 16像素宽? 16像素高?当我们用鼠标选择一个字符时,所选字符周围有一个蓝色框,大于该字符。这与这个问题有关吗?

1 个答案:

答案 0 :(得分:1)

首先,我认为font-size总是与字母的高度以及&#34;蓝框&#34;的原因有关。略大,因为它突出显示line-height指定的行。

要将文字放在盒子里,你有几个选择:

1)您绝对可以将span置于div内,如此:

div {
    width: 300px;
    height: 300px;
    border: 1px solid black;
    position: relative;
}
span {
    position: absolute;
    top: 50px;
    left: 50px;
}

http://jsfiddle.net/5xukp/

2)您可以将span&#39; display设置为blockinline-block,然后应用marginpadding如此定位span

span {
    display: inline-block;
    margin-top: 50px;
    margin-left: 50px;
}

http://jsfiddle.net/m79as/

编辑 - 在回复您的评论时,没有background-position这样的属性,您可以将其设置为center centercenter left但是您可以使用vertical-aligntext-align定位文字。要正确垂直对齐span,您需要将display设置为table-cell

div {
    width: 300px;
    height: 300px;
    border: 1px solid black;
    display: table-cell;
    text-align: center; /* left|right|center|justify */
    vertical-align: middle; /* top|text-top|middle|bottom|text-bottom */
}

http://jsfiddle.net/6ExB2/