html/ css 代码如何实现类似在hr中间夹文字的？
请问有没有html代码实现类似在hr中间夹文字的？---------文字--------谢谢！...
请问有没有html代码实现类似在hr中间夹文字的？
---------文字--------
谢谢！ 展开
---------文字--------
谢谢！ 展开
6个回答
展开全部
这种效果一般是用来做分割线，分为以下两种情况
这种效果实现起来并不难，可以用很多方法实现：
方法1：图片，简单，美观
方法2：hr+p标签，两种情况p标签都要添加position：relative，p标签的z-index属性的值要高于hr标签，然后调整left和top的值，让文字压住横线，第一种情形p标签设置背景色白色，第二种背景透明即可
（图片文字已处理。。。）
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
html:
<hr style="border: 1px solid #c0c0c0">
<div class="hr-more">更多</div>
css:
.hr-more {
height: 20px; //div的高度
width: 50px; //div的宽度
position: relative; //div相对定位（重点！）
left: 50%; //将div相对于自己与左边(left)移动50%的距离（重点！）
top: -30px; //将div相对于自己向上(top)移动-30px的距离<调整你自己的参数>（重点！）
font: normal 1.2em/20px 微软雅黑; //字体（并不是必须，可不添加）
vertical-align: middle; //垂直居中（并不是必须，可不添加）
text-align: center; //水平居中（并不是必须，可不添加）
border-radius: 4px; //div呈现圆角效果（并不是必须，可不添加）
background-color: chartreuse; //div的背景色（并不是必须，可不添加）
}最重要的是：
position: relative; （相对定位）
left: 50%; （居中的效果）
top: -30px; （注意是负数，根据自己的实际情况调整参数）
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
这个用html5新的标签legend可以实现，你试试一下代码
<!DOCTYPE HTML>
<html>
<body>
<fieldset>
<legend>个人信息：</legend>
<div>内容</div>
</fieldset>
</body>
</html>
本回答被提问者采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
做成两线可以做背景图片。。然后文字在上面居中显示～
追问
请写明详细代码，我html是刚入门，谢谢
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
更多回答（4）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
