div边框加入文字标题

Posted 磬中草

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了div边框加入文字标题相关的知识,希望对你有一定的参考价值。

效果图:

 

代码:

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<style type="text/css">
div.aaa{
    width:70%;
    height:100%;
    padding:5px 30px;
    margin-top:50px;
    margin-left:150px;
    border:2px solid #CCCCCC;
}
span.title{
    display:block;
    width:100px;
    height:30px;
    position:relative;
    top:-15px;
    text-align: center;
    background: white;
}
</style>
</head>
<body>
<form:form modelAttribute="organizationManageDto" id="organizationManageForm">
    <div class="panel">
    <div class="panel-body">
    <div class="aaa">
        <span class="title">成本计算</span>
        <div class="row">
            <div class="col-md-2" align="right">
                <label class="control-label"><span class="red_star">*</span>机构编号:</label>
            </div>
            <div class="col-md-4" style="width: 30%">
                <input placeholder="机构编号" maxlength="16"/>
            </div>
        </div>
    </div>
    </div>
    </div>
</form:form>
</body>
</html>

以上是关于div边框加入文字标题的主要内容,如果未能解决你的问题,请参考以下文章

如何用CSS让文字显示在边框上

文字样式

如何将按钮的底部边框(白色)放在包含 div 的底部边框上

JQuery动画边框不移动div

当div有边框图片的时候,怎么实现内部的p标签的水平和垂直居中

关于给inputdiv添加hover样式,边框变大后里面的文字移动问题-解决办法