Shulou(Shulou.com)06/01 Report--

This article mainly introduces css how to achieve the middle text, both sides of the horizontal line title effect, has a certain reference value, interested friends can refer to, I hope you can learn a lot after reading this article, the following let Xiaobian take you to understand.

1.vertical-align attribute

The vertical-align property sets the vertical alignment of the element.

This attribute defines the vertical alignment of the baseline of an inline element relative to the baseline of the row in which the element is located. Allows you to specify negative length values and percentage values.

Middle text, horizontal lines on both sides

.header

{

Width:400px

Height:36px

Line-height:36px

Border:1pxsolidgreen

Text-align:center

}

.line

{

Display:inline-block

Width:100px

Border-top:1pxsolid#cccccc

Vertical-align:5px

/ / when I see that .text is set to vertical-align:-5px on the Internet, I try to feel that it conflicts with the line-height set by .header, and the effect is not appropriate. So vertical-align is set to .line.

}

The effect of 2.css pseudo-class implementation:

Middle text, horizontal lines on both sides

.header

{

Width:400px

Height:36px

Line-height:36px

Text-align:center

Border:1pxsolidgreen

Position:relative

}

.headerdiv: before,.headerdiv:after

{

Position:absolute

Background:#ccc

Content: ""

Height:1px

Top:50%

Width:100px

}

.headerdiv: before {left:10px;}

.headerdiv: after {right:10px;}

Thank you for reading this article carefully. I hope the article "how to achieve the title effect of the middle text and the horizontal lines on both sides of the css" shared by the editor is helpful to everyone. At the same time, I also hope that you will support us and pay attention to the industry information channel. More related knowledge is waiting for you to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.