html字两边的横线_css实现中间文字，两边横线效果

1. vertical-align属性实现效果：

vertical-align 属性设置元素的垂直对齐方式。

该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐。允许指定负长度值和百分比值。

中间文字，两边横线

.header

{

width:400px;

height:36px;

line-height:36px;

border:1px solid green;

text-align:center;

}

.line

{

display:inline-block;

width:100px;

border-top:1px solid #cccccc;

vertical-align:5px;

//看到网上有把.text设置为vertical-align:-5px的，试了一下感觉和.header设置的line-height有冲突,效果不太合适。所以将vertical-align设置到.line上了

}

2. css伪类实现效果：

中间文字,两边横线

.header

{

width:400px;

height:36px;

line-height: 36px;

text-align:center;

border:1px solid green;

position:relative;

}

.header div:before,.header div:after

{

position:absolute;

background:#ccc;

content:"";

height:1px;

top:50%;

width:100px;

}

.header div:before{left:10px;}

.header div:after{right:10px;}

如您对本文有疑问或者有任何想说的，请点击进行留言回复，万千网友为您解惑！

html字两边的横线_css实现中间文字，两边横线效果相关推荐

html字两边的横线_css实现中间文字两边横线效果
1. vertical-align属性实现效果: vertical-align 属性设置元素的垂直对齐方式. 该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐.允许指定负长度值和百分比值. ...
html字两边的横线_css怎么在文字两边加上横线,word文字两边加横线
css怎么在文字两边加上横线CSS怎么在文本两侧添加水平线,在css中,可以使用:before.after和content属性在文本两侧添加横线:语法"e:在前,e:在后{内容:" ...
html字两边的横线_css怎么在文字两边加上横线
css中可利用:before.:after和content属性来在文字两边加上横线:语法"E:before,E:after{content:"";flex:1 1;bor ...
html字两边的横线_css如何在文字两边加上横线的效果？
CSS提供了在网页中间制作包含文字或图像的水平线以使其具有吸引力的功能,这可以通过使用简单的CSS属性来实现.那么css如何在文字两边加上横线(文字显示在水平线中间)?下面本篇文章给大家介绍一下. c ...
html字两边的横线_CSS，中间文字两边横线 CSS样式写法
在项目中遇到过中间文字,两边横线的布局,如下图: 两边横线我们可以使用标签的上边框或者下边框,然后对中间的文字使用 vertical-align 属性来控制. 产品清单 css.order { hei ...
html字两边的横线_css实现中间文字两边横线(原创）
/* 方法1:*/ body { background:#fff; width:888px; margin:15px auto; } .con { position:relative; height: ...
html在字体两边加直线,css怎么在文字两边加上横线
css中可利用:before.:after和content属性来在文字两边加上横线:语法"E:before,E:after{content:"";flex:1 1;bor ...
div html 下边加横线_CSS如何给文字添加下划线样式？
在CSS中可以使用text-decoration属性或border-bottom属性来给文字添加下划线样式.下面本篇文章就来给大家介绍一下,希望对大家有所帮助. 方法1:使用text-decorati ...
html字两边的横线_css如何实现中间文字，两边横线的标题效果？（代码示例）...
本篇文章给大家带来的内容是介绍css如何实现中间文字,两边横线的标题效果?(代码示例).有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所帮助. 1. vertical-align属性实现效果 ...

html字两边的横线_css实现中间文字，两边横线效果

html字两边的横线_css实现中间文字，两边横线效果相关推荐

最新文章

热门文章