使用扩展到边框的文本创建HTML元素

概述我正在尝试创建一个如下所示的 HTML元素： – 基本上,< div>或者带有边框的其他元素,以及在div中居中但延伸到边框区域的内部(可能是多行)文本. 到目前为止,我唯一有效的方案是使用三个(！)div：一个用于边框,第二个用作第三个的容器,以确保垂直居中是正确的. <div class="BORDER" style = "left: 190px; top: 50px;"></div>< @H_404_1@ 我正在尝试创建一个如下所示的 HTML元素： –

基本上,< div>或者带有边框的其他元素,以及在div中居中但延伸到边框区域的内部(可能是多行)文本.

到目前为止,我唯一有效的方案是使用三个(！)div：一个用于边框,第二个用作第三个的容器,以确保垂直居中是正确的.

<div  style = "left: 190px; top: 50px;"></div><div class = "WRAPPER" style = "left: 190px; top: 50px;">  <div>TEST THREE</div></div>

这感觉很尴尬：有没有办法用更少的元素实现相同的外观？

限制(澄清)

>文本可以有一行或多行
>边框将是一个图像,最终将通过边框图像机制进行拉伸.

Jsfiddle与CSS和其他一些(失败的)尝试就在这里. http://jsfiddle.net/6wB3k/

解决方法 我不确定它是否适合您的实际用例,但我只用一个div即可实现您的显示：

HTML：

<div class=dystroy>TEST FOUR</div>

CSS：

.dystroy {  position: fixed;  left: 50px; top: 50px;  margin: 0px;  padding: 16px;  height : 48px;  wIDth : 50px;  display : table-cell;  vertical-align : mIDdle;  text-align : center;  color:  #000000;  Font-size : 16px;  Font-family : Calibri;}.dystroy:after {  position: relative;   display : table-cell;  top: -48px; left:0px;  border: solID;  border-wIDth: 16px 16px;  border-color: #e0e0e0;  height: 32px;  wIDth: 50px;  content:" ";  z-index:-1;  Font-size : 16px;}

Demonstration

编辑：事实上,这里没有真正的动态垂直居中,这需要一个额外的div.

总结

以上是内存溢出为你收集整理的使用扩展到边框的文本创建HTML元素全部内容，希望文章能够帮你解决使用扩展到边框的文本创建HTML元素所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。