如何將標簽與div控件的頂部中間對齊並在其周圍繪制一個矩形？

Question

我在div控件中有一個標簽。我想將其與div控件的頂部中間對齊並在該文本周圍繪制一個矩形。我也想從左到右逐一顯示該標簽文本的字符。

我該如何實現？

Answer 1

要將文本居中放置在div水平線的中間，您只需要使用以下樣式即可

div#ctrl {
     text-align: center
}

要在文本周圍有一個矩形，您需要定義一個邊框，可能帶有填充和邊距：

div#ctrl span {
    border: 1px #333 solid;
    padding: 5px;
}

您需要使用javascript來為文本設置動畫，而使用jQuery則更容易。 這是一個工作示例的鏈接，我在這里鞭打了您要尋找的內容：

http://jsfiddle.net/5QdPh/

將來嘗試做更多的研究，並就以前未曾回答的特定問題提出問題。 所有這些都是基本的，有據可查的東西。

Answer 2

在這里，你去的第一部分：

http://fiddle.jshell.net/VdmFV/

第二部分，您需要一些精美的javascript / jQuery，您應該首先嘗試一下，然后再回到這里獲取指針。

Answer 3

<style>

#control {
    width:200px;
    height:200px;
    background:#ddd;
    text-align: center
}
#label {
    border:1px solid red;
}
</style>

<div id='control'>
    <span id='label'></span>
</div>

<script>
var label = document.getElementById("label");
var msg = "Message";
var i = 0;
var interval = setInterval( function() {
    label.innerHTML = msg.substr(0,i);
    i++;
    if ( i == msg.length ) {
        clearInterval(interval);
    }
}, 1000)
</script>