CSS to achieve horizontal lines on both sides of the middle text

CSS to achieve horizontal lines on both sides of the middle text

1. The vertical-align property achieves the following effect:

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

This property defines the vertical alignment of an inline element's baseline relative to the baseline of the line in which the element resides. Negative length values ​​and percentage values ​​are allowed.

<div class="header">
    <span class="line"></span>
    <span class="text">Text in the middle, horizontal lines on both sides</span>
    <span class="line"></span>
</div>

<style>
.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;  
  // I saw online that .text is set to vertical-align:-5px. I tried it and it seems to conflict with the line-height set for .header, so the effect is not quite right. So set vertical-align to .line}
</style> 

2. CSS pseudo-class implementation effect:

<div class="header">
    <div>Text in the middle, horizontal lines on both sides</div>
</div>

<style>
    .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;}
</style> 

Summarize

The above is the CSS that I introduced to you to achieve the horizontal line effect on both sides of the middle text. I hope it will be helpful to you. If you have any questions, please leave me a message and I will reply to you in time. I would also like to thank everyone for their support of the 123WORDPRESS.COM website!

<<:  Vue template configuration and webstorm code format specification settings

>>:  Detailed tutorial on installing pxc cluster with docker

Recommend

How to handle long data when displaying it in html

When displaying long data in HTML, you can cut off...

JS implements Baidu search box

This article example shares the specific code of ...

Docker volumes file mapping method

background When working on the blockchain log mod...

Docker automated build Automated Build implementation process diagram

Automated build means using Docker Hub to connect...

Does MySql need to commit?

Whether MySQL needs to commit when performing ope...

JavaScript implements click to change the image shape (transform application)

JavaScript clicks to change the shape of the pict...

Various ways to achieve the hollowing effect of CSS3 mask layer

This article introduces 4 methods to achieve mask...

htm beginner notes (must read for beginners)

1. What is HTML HTML (HyperText Markup Language):...

How to make vue long list load quickly

Table of contents background Main content 1. Comp...

Website design should pay attention to the sense of color hierarchy

Recently I have been saying that design needs to h...

Nginx request limit configuration method

Nginx is a powerful, high-performance web and rev...

Pros and Cons of Vite and Vue CLI

There is a new build tool in the Vue ecosystem ca...

How to Install Xrdp Server (Remote Desktop) on Ubuntu 20.04

Xrdp is an open source implementation of Microsof...