css中横线中间显示文字

最新推荐文章于 2024-10-18 17:20:30 发布
最新推荐文章于 2024-10-18 17:20:30 发布
阅读量2.7k 收藏 6
点赞数 1
CC 4.0 BY-SA版权
分类专栏： 随笔 前端开发 文章标签： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/android_app_2012/article/details/112616517

css中横线中间显示文字，类似文档地图注脚

<div style="width:100%;height:36px;line-height:36px;display:flex;">
    <span style="display:inline-block;flex:1;border-top:1px solid #cccccc;margin-top: 18px;"></span>
    <span style="margin-left: 5px;margin-right:5px; color: #aaaaaa;">中间显示文字</span>
    <span style="display:inline-block;flex:1;border-top:1px solid #cccccc;margin-top: 18px;"></span>
</div>
CSS——两边通屏横线，中间是内容标题
我是我
06-21 557
1.实现效果 2.实现思路 一个容器，包含内部所有内容container 三个元素，左边，右边为线，中间是title内容 标题字数不固定，所以宽度不可限制，或者太长需要换行根据场景进行设置 flex布局，不可压缩的设置flex-shrink:0; 3.代码实现 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-C
css 文字中间 两边横线
p_pppxxxxmmm的博客
07-31 814
先看效果图 开始的时候两边的横杠我是用了两个标签去写的，现在想想这个写法好low，无脸面对各位前端同胞 现在有更简单的方法，来，直接贴代码： .footer { width: 100%; height: 143rpx; font-size: 24rpx; font-weight: 400; color: rgba(153, 153, 153, 0.6); text-align: center; line-height: 156rpx; position: relative;
CSS控制文字在一条线中间的方法
09-25
主要为大家介绍了CSS控制文字在一条线中间的方法,这里实现将“网页特效”四个字显示在虚线框的上下居中位置,非常美观,需要的朋友可以参考下
css将文字放在一条横线中间
weixin_42340514的博客
10-30 3645
<div class="line-main"> <div class="line"> <div class="line-text">查看更多详情</div> </div> </div> //css .line-main{ margin:10rpx 0; background: #fff; te...
css 横线中间的文字
张许许的博客
08-14 1995
.gaikuang:before{ content: ''; position: absolute; top: 5%; left: 0px; background: #dad6d6; width: 44%; height: 1px; } .gaikuang:after { content: ''; position: abso...
用css实现在横线中间插入文字
weixin_34352449的博客
09-20 1009
在一些登录或者注册界面中常常可看到，一个大框框上面的横线中有插入文字，大概示意图如下： 这种现象其实是相对位置作用的结果，可以通过相对定位，是某元素恰好出现在div的边框上。 position: relative; 下面举例说明： 首先创建html元素 <div> <span class="title">注册</span> ...
css 分割线中间带文字
weixin_38673922的博客
08-29 1651
【代码】css 分割线中间带文字。
css实现中间文字两边横线效果
09-22
这两种方法都能有效地实现中间文字两侧有横线的效果。第一种方法更适用于不支持CSS伪类的老浏览器，而第二种方法则更简洁，无需额外的HTML标签。选择哪种方法取决于项目的需求和目标浏览器的兼容性。无论选择哪种...
CSS：把文字放到横线之间
weixin_44538672的博客
10-18 302
【代码】CSS：把文字放到横线之间。
css 横线中间添加文字
weixin_33922672的博客
03-16 971
demoline01、02选一个用足够了 <style> .demo_line_01 { width: 200px;/*这指的是文字的宽度*/ padding: 0 20px 0; margin: 20px auto; line-height: 1px; border-left: 200px solid #ddd; border...
CSS控制文字在一条线的中间.rar
03-23
CSS控制文字在一条线的中间.rarCSS控制文字在一条线的中间.rarCSS控制文字在一条线的中间.rarCSS控制文字在一条线的中间.rar
经典的横线中间文字css布局---flex布局
weixin_30375247的博客
03-13 233
　<div class="title"> 　　　　<div class="line"></div> 　　　　<div class="text">ddd</div> 　　　　<div class="line"></div> 　　</div> .title{width:80%;di...
css实现文字在横线上居中
weixin_30416871的博客
05-13 577
效果图 html代码： <body> <p class="p1">中间</p> <div class="div"> </div> </body> css代码： .p1 { display: inline-block; font-size: ...
css分隔线中间带文字
热门推荐
buyue
01-16 1万+
http://www.daqianduan.com/4258.html http://www.daqianduan.com/example?pid=4258
使用CSS制作左右横线中间文字效果，直接使用
xcj_20160810的博客
04-17 535
.title-text span { display: block; /*设置为块级元素会独占一行形成上下居中的效果*/ position: relative; /*定位横线（当横线的父元素）*/ color: #188eee; /*居中文字的颜色*/ text-align: center; } .title-text span:before, .title-text span:after { content: ''; pos
css实现中间文字 两端横线的两种方法
weixin_39060799的博客
10-25 7634
效果图 代码 &amp;amp;amp;amp;amp;amp;lt;!DOCTYPE html&amp;amp;amp;amp;amp;amp;gt; &amp;amp;amp;amp;amp;amp;lt;html&amp;amp;amp;amp;amp;amp;gt; &amp;amp;amp;amp;amp;amp;lt;head&amp;amp;amp;amp;amp;amp;gt; &amp;amp;amp;amp;amp;a
css 两边是线中间文字的多种实现方法
weixin_44727080的博客
05-18 656
css 两边是线中间文字的多种实现方法 页面： <div class="soild_text_one"> <fieldset> <legend>历史活动一</legend> </fieldset> </div> <div class="soild_text_two"> <hr/><span>历史活动二</span><hr/> </div&gt
html字两边的横线_css实现中间文字，两边横线效果
weixin_39636245的博客
12-20 1037
1. vertical-align属性实现效果：vertical-align 属性设置元素的垂直对齐方式。该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐。允许指定负长度值和百分比值。中间文字，两边横线.header{width:400px;height:36px;line-height:36px;border:1px solid green;text-align:center;}.li...
css分割线添加文字
qq_44162778的博客
03-21 1025
css分割线中添加文字。
css在文字中间加横线
最新发布
04-03
### CSS实现文字中间加横线的效果 要通过CSS实现文字中间加横线的效果，可以利用伪元素 `::before` 和 `::after` 来创建两条水平的线条，并将其放置在目标文字的两侧。以下是具体方法： #### 方法一：基于绝对定位的方式 这种方法使用了绝对定位来控制伪元素的位置。 ```css .lineWrap { position: relative; text-align: center; width: 100%; } .lineWrap .line { color: #ccc; font-size: 20px; position: relative; z-index: 1; /* 确保文字覆盖在横线上 */ } /* 定义伪元素样式 */ .lineWrap .line:before, .lineWrap .line:after { content: ""; position: absolute; top: 50%; height: 2px; background-color: #eee; width: calc(50% - 50px); /* 计算剩余空间减去文字宽度的一半 */ } .lineWrap .line:before { left: 0; } .lineWrap .line:after { right: 0; } ``` 上述代码中，`.lineWrap .line:before` 和 `.lineWrap .line:after` 创建了两个伪元素作为横线[^1]。它们被设置为相对于父容器的绝对位置，并且通过 `calc()` 函数动态计算其宽度以适应不同屏幕尺寸下的布局需求。 --- #### 方法二：基于Flexbox布局方式 另一种更现代的方法是采用 Flexbox 布局技术，这种方式更加简洁直观。 ```css div { display: flex; align-items: center; justify-content: space-between; width: 100%; } div:before, div:after { content: ""; flex-grow: 1; border-bottom: 1px solid tomato; margin: 0 8px; /* 调整文字与横线之间的间距 */ } span { white-space: nowrap; /* 防止文字换行 */ } ``` 在此方案中，`flex-grow: 1` 属性使得伪元素能够自动扩展填充可用的空间，从而形成均匀分布的两道横线[^2]。同时，借助 `align-items: center` 可确保文字垂直方向上居中显示。 --- #### 注意事项 - 如果发现某些浏览器下存在兼容性问题，则可能需要额外调整属性值或者引入前缀声明。 - 对于移动端设备而言，建议测试实际渲染效果并适当修改参数（如字体大小、边距等），以便获得最佳视觉体验[^3]。 ---
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值