如何将标签与 div 控件的顶部中间对齐并在其周围绘制一个矩形？答案

【问题标题】：How to align a label to the top middle of the div control and draw a rectangle around it?如何将标签与 div 控件的顶部中间对齐并在其周围绘制一个矩形？
【发布时间】：2012-08-03 07:04:38
【问题描述】：

我在 div 控件中有一个标签。我想将它与 div 控件的顶部中间对齐并在该文本周围绘制一个矩形。我还想从左一个一个地显示该标签文本的字符向右。

我如何做到这一点？

【问题讨论】：

我为标签添加了一个垂直对齐的css样式：顶部，它将标签垂直带到了分区的顶部，而不是水平。
HTML:

in css: #imagehome{ vertical-align: top; }

标签： javascript css html microsoft-metro windows-runtime

【解决方案1】：

要将文本居中到 div 水平的中间，您只需要使用

对其进行样式设置

div#ctrl {
     text-align: center
}

要在文本周围有一个矩形，您需要定义一个边框，可能带有填充和边距：

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

您需要使用 javascript 为文本设置动画，使用 jQuery 更容易。这里有一个工作示例的链接，我从你正在寻找的内容中抽出：

http://jsfiddle.net/5QdPh/

将来尝试做更多的研究，并就以前没有回答过的具体问题提出问题。所有这些都是基本的、有据可查的东西。

【讨论】：

js fiddle 停止工作，所以这里是另一个：jsfiddle.net/thundercracker/stDPd

【解决方案2】：

这里是第一部分：

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

在第二部分，你需要一些花哨的 javascript / jQuery，你应该先自己尝试，然后再回到这里获取指针。

【讨论】：

感谢大家的回复。真的很有帮助。

【解决方案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>

【讨论】：