CSS || How To Create Horizontal Divider Line With Words In The Middle Using CSS

December 23, 2020 admin No comments

The following is a module which demonstrates how to create a horizontal divider line with words in the middle using CSS.

1. Usage

The example below demonstrates the use of the Divider CSS.





		
		
			1. Usage
			
XHTML
			
			<!-- // Usage -->

<h2> This </h2>

<div class="divider">
    <span class="divider-line"></span>
    <span class="divider-content">
        or
    </span>
    <span class="divider-line"></span>
</div>

<h2> That </h2> 
			
				
					
				
					1
2
3
4
5
6
7
8
9
10
11
12
13
				
						<!-- // Usage -->
 
<h2> This </h2>
 
<div class="divider">
    <span class="divider-line"></span>
    <span class="divider-content">
        or
    </span>
    <span class="divider-line"></span>
</div>
 
<h2> That </h2>

Sample:

2. Divider Line CSS

The following is the Divider css file. Include this in your project to start using!





		
		
			Utils.css
			
CSS
			
			/*
// ============================================================================
//    Author: Kenneth Perkins
//    Date:   Dec 23, 2020
//    Taken From: http://programmingnotes.org/
//    File:  Utils.css
//    Description: General utility Css
// ============================================================================ 
*/

.divider-line {
    -webkit-box-flex: 1;
    -webkit-flex-grow: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    -webkit-flex-shrink: 1;
    -ms-flex-negative: 1;
    flex-shrink: 1;
    background-color: #dbdbdb;
    height: 1px;
    position: relative;
    top: .45em;
}

.divider {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    display: flex;
}

.divider-content {
    color: #8e8e8e;
    -webkit-box-flex: 0;
    -webkit-flex-grow: 0;
    -ms-flex-positive: 0;
    flex-grow: 0;
    -webkit-flex-shrink: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    font-size: 13px;
    font-weight: 600;
    line-height: 15px;
    margin: 0 18px;
    text-transform: uppercase;
} /* http://programmingnotes.org/ */
			
				
					
				
					1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
				
						/*
// ============================================================================
//    Author: Kenneth Perkins
//    Date:   Dec 23, 2020
//    Taken From: http://programmingnotes.org/
//    File:  Utils.css
//    Description: General utility Css
// ============================================================================ 
*/
 
.divider-line {
    -webkit-box-flex: 1;
    -webkit-flex-grow: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    -webkit-flex-shrink: 1;
    -ms-flex-negative: 1;
    flex-shrink: 1;
    background-color: #dbdbdb;
    height: 1px;
    position: relative;
    top: .45em;
}
 
.divider {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    display: flex;
}
 
.divider-content {
    color: #8e8e8e;
    -webkit-box-flex: 0;
    -webkit-flex-grow: 0;
    -ms-flex-positive: 0;
    flex-grow: 0;
    -webkit-flex-shrink: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    font-size: 13px;
    font-weight: 600;
    line-height: 15px;
    margin: 0 18px;
    text-transform: uppercase;
} /* http://programmingnotes.org/ */

3. More Examples

Below are more examples demonstrating the use of the ‘Divider‘ css. Don’t forget to include the module when running the examples!





		
		
			More Examples
			
XHTML
			
			<!--
// ============================================================================
//    Author: Kenneth Perkins
//    Date:   Dec 23, 2020
//    Taken From: http://programmingnotes.org/
//    File:  demo.html
//    Description: Demonstrates the use of css styles
// ============================================================================
-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>My Programming Notes HTML Demo</title>
<style>
.main {
    text-align:center;
    margin-left:auto;
    margin-right:auto;
}
</style>

<!-- // Include module -->
<link rel="stylesheet" type="text/css" href="./Utils.css">

</head>
<body>
<div class="main">
    <div>My Programming Notes HTML Demo</div>

    <h2> This </h2>

    <div class="divider">
        <span class="divider-line"></span>
        <span class="divider-content">
            or
        </span>
        <span class="divider-line"></span>
    </div>

    <h2> That </h2> 
</div>
</body>
</html> <!-- http://programmingnotes.org/ -->
			
				
					
				
					1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
				
						<!--
// ============================================================================
//    Author: Kenneth Perkins
//    Date:   Dec 23, 2020
//    Taken From: http://programmingnotes.org/
//    File:  demo.html
//    Description: Demonstrates the use of css styles
// ============================================================================
-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>My Programming Notes HTML Demo</title>
<style>
.main {
    text-align:center;
    margin-left:auto;
    margin-right:auto;
}
</style>
 
<!-- // Include module -->
<link rel="stylesheet" type="text/css" href="./Utils.css">
 
</head>
<body>
<div class="main">
    <div>My Programming Notes HTML Demo</div>
 
    <h2> This </h2>
 
    <div class="divider">
        <span class="divider-line"></span>
        <span class="divider-content">
            or
        </span>
        <span class="divider-line"></span>
    </div>
 
    <h2> That </h2> 
</div>
</body>
</html> <!-- http://programmingnotes.org/ -->

QUICK NOTES:
The highlighted lines are sections of interest to look out for.

The code is heavily commented, so no further insight is necessary. If you have any questions, feel free to leave a comment below.

Was this article helpful?

👍 YesNo

Posted in: CSS, Snippets Tags: css, divider

CSS || How To Create Horizontal Divider Line With Words In The Middle Using CSS

Related

Leave a ReplyCancel reply

Search

Compile Your Code Now

Translate Page

Popular Pages

Recent

Archives

Categories