css样式，中间文字，两边横线

在项目中遇到过中间文字，两边横线的布局，如下图：

两边横线我们可以使用标签的上边框或者下边框，然后对中间的文字使用 vertical-align 属性来控制。

html

<div class="order"> <span class="line"></span>   <span class="txt">产品清单</span>    <span class="line"></span>
</div>

css

 .order {height: 60px;line-height: 60px;text-align: center;
}.order .line {display: inline-block;width: 150px;border-top: 1px solid #ccc ;
}
.order .txt {color: #686868;vertical-align: middle;
}

在css样式中使用 vertical-align: middle，然后就发现跟UI图有一点点区别，横线没有完全在文字的中间

查找 vertical-align 的属性就会发现有length 和 % 两个属性

然后尝试使用 % 看看能不能让横线在文字的中间，通过调整 css 样式

 vertical-align: -8%;

发现横线在文字的中间，那么 length 长度属性是否也可以呢？试一试发现也是可以的

 vertical-align: -4px;

css样式，中间文字，两边横线相关推荐

HTML中用CSS样式实现文字两边添加水平线
(1)html中的代码: <div class="content"><p class="title">新特卖每日早10晚8上新</ ...
html字两边的横线_css实现中间文字两边横线效果
1. vertical-align属性实现效果: vertical-align 属性设置元素的垂直对齐方式. 该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐.允许指定负长度值和百分比值. ...
html字两边的横线_CSS，中间文字两边横线 CSS样式写法
在项目中遇到过中间文字,两边横线的布局,如下图: 两边横线我们可以使用标签的上边框或者下边框,然后对中间的文字使用 vertical-align 属性来控制. 产品清单 css.order { hei ...
html文本居中左右有横线,CSS伪类实现中间文字两边横线效果
利用CSS伪类实现中间文字两边横线效果效果图: 实现代码: CSS伪类实现中间文字两边横线效果 body { margin: 0; } .login_content { position: abso ...
html5css字体下划线,如何利用css样式做出文字的下划线？
如何利用css样式做出文字的下划线? 在将网页设计完成后,接下来就需要前端和后端工程师的配合,来将网页正式上线了.但是身为网页设计师,还是有必要掌握一些前段知识的,主要指html5和css3,在招聘网 ...
html在字体两边加直线,css怎么在文字两边加上横线
css中可利用:before.:after和content属性来在文字两边加上横线:语法"E:before,E:after{content:"";flex:1 1;bor ...
CSS样式让文字水平居中和垂直居中的方法
css中让文字居中,首先可以分单行文字和多行文字,还可以讨论高度是否固定. 不论是多行文字还是单行文字,水平居中都可以设置text-align. text-align 属性规定元素中的文本的水平对齐方 ...
CSS伪类实现中间文字两边横线效果
一.通过display:table实现 html <div class="line">中间文字</div> css .line {display: tabl ...
CSS实现文字两边横线,CSS实现文字两边线条
先看效果,其他方式登陆两边各有一条横线代码如下,用的是scss语法: uniapp中,如果是普通的html,将view替换成div即可. <view class="other-log ...
html字两边的横线_css实现中间文字两边横线(原创）
/* 方法1:*/ body { background:#fff; width:888px; margin:15px auto; } .con { position:relative; height: ...

css样式，中间文字，两边横线

css样式，中间文字，两边横线相关推荐

最新文章

热门文章