其父母自由地移動文字

有動議下列跨度內的文字像一個不重複的背景圖像的方法嗎？

例如：左起50px，左起40px？而不會造成額外的高度和寬度！

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

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

我可以問問題嗎？ 16px字符佔用多少空間？我的意思是16px是什麼意思？ 16像素寬？ 16像素高？當我們用鼠標選擇一個字符時，所選字符周圍會出現一個藍色框，該字符大於該字符。這與這個問題有關嗎？

來源

2014-05-07 Sir Meysam Ferguson

對不起，我怎樣才能使文本，中心左，中心，中心？ –

首先，我認爲font-size總是與字母的高度有關，「藍色方塊」略大一點的原因是因爲它突出顯示了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的display設置爲block或inline-block，然後應用margin或padding以定位span像這樣：

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

http://jsfiddle.net/m79as/

編輯 - 在回答您的意見，有像background-position沒有財產，你可以將其設置爲center center或center left但是你可以使用vertical-align和text-align來定位文字。爲了垂直右對齊從DIV的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/

來源

2014-05-07 16:21:30 Sam

其父母自由地移動文字

回答

相關問題