html字两边的横线_css如何在文字两边加上横线的效果？

CSS提供了在网页中间制作包含文字或图像的水平线以使其具有吸引力的功能，这可以通过使用简单的CSS属性来实现。那么css如何在文字两边加上横线(文字显示在水平线中间)？下面本篇文章给大家介绍一下。

css在文字两边加上横线(文字显示在水平线中间)

语法：h4:before, h4:after {

content: "";

flex: 1 1;

border-bottom: 2px solid #000;

margin: auto;

}

示例：

h4 {

display: flex;

flex-direction: row;

}

h4:before,

h4:after {

content: "";

flex: 1 1;

border-bottom: 2px solid #000;

margin: auto;

}

img {

height: 100px;

width: 100px;

border-radius: 50%;

}

HTML中文网

效果图：

更多web前端开发知识，请查阅 HTML中文网！！

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样式写法
在项目中遇到过中间文字,两边横线的布局,如下图: 两边横线我们可以使用标签的上边框或者下边框,然后对中间的文字使用 vertical-align 属性来控制. 产品清单 css.order { hei ...
html字两边的横线_css实现中间文字两边横线(原创）
/* 方法1:*/ body { background:#fff; width:888px; margin:15px auto; } .con { position:relative; height: ...
html字两边的横线_css实现中间文字，两边横线效果
1. vertical-align属性实现效果: vertical-align 属性设置元素的垂直对齐方式. 该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐.允许指定负长度值和百分比值. ...
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 ...
word中在文字上方加上横线的方法
点"开始"中的"拼音指南",,然后在其中的"拼音文字"中打上一个横线,确定后即可发现有了上横线.

html字两边的横线_css如何在文字两边加上横线的效果？

HTML中文网

html字两边的横线_css如何在文字两边加上横线的效果？相关推荐

最新文章

热门文章