给一行文字的左侧、右侧、两端添加横线

最新推荐文章于 2022-07-14 17:20:18 发布

weixin_30830327

最新推荐文章于 2022-07-14 17:20:18 发布

阅读量688

点赞数

CC 4.0 BY-SA版权

文章标签： python

原文链接：http://www.cnblogs.com/wangchufang/p/8302610.html

本文介绍了一种使用CSS实现水平居中文字与线条的布局方法。通过定义特定的CSS样式，如cityLineLeft和cityLineRight，可以创建美观且响应式的页面布局效果。此技巧适用于网页设计与前端开发。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果是酱婶的：

HTML布局：

css样式：

源代码-css：

 1 .cityLineLeft {
 2     vertical-align: middle;
 3     text-align: left;
 4     display: inline-block;
 5     width: 100%;
 6     border-top: 1px solid #ccc;
 7 }
 8 
 9 .cityLineRight {
10     vertical-align: middle;
11     text-align: right;
12     display: inline-block;
13     width: 100%;
14     border-top: 1px solid #ccc;
15 }
16 
17 .cityLineText {
18     vertical-align: middle;
19     font-size: 1.3em;
20     color: #999;
21 }