CSSワードプレスのセンターテキスト

Question

私はCSSの初心者です。

私はWordpressでウェブサイトを作成しました。新しいテンプレートページを作成しました。 http://jobboard.jobsbe.be/test/

私はページの外観を欲しいものにするためにいくつかのCSSを追加しましたが、それを得る方法がわかりません。

ページを見ると、2つのディバイダの間に「OR」という単語を使用していることがわかります。

私はインターネット上で知っているすべてのものを試しましたが、2つのディバイダーの間に「OR」という語を置くことはできません。

私はこれをどのように行うことができますか？

これは私のCSSです：

/** 
* The parent theme's CSS is automatically included so there is no need 
* to use the @import rule to include the parent theme CSS. 
* 
* Place Custom CSS Below this. 
*/ 

/**Changing color of links footer*/ 
.widget--footer a { 
    color: #7dc246; 
} 

/**Changing color of menu links*/ 
.nav-menu--primary ul li a, .nav-menu--primary li a { 
    color: #7dc246; 
} 
.nav-menu--primary ul li a:hover, .nav-menu--primary li a:hover { 
    color: #fff; background-color: #7dc246; 
} 

/**Changing style Login box*/ 
.nav-menu--primary ul li.highlight > a, .nav-menu--primary ul li.login > a { 
    border-style: solid; 
    border-width: 1px; 
    border-color: #7dc246; 
    color: #fff; 
    background-color: #7dc246; 
} 
.nav-menu--primary ul li.highlight > a:hover, .nav-menu--primary ul li.login > a:hover { 
    border-style: solid; 
    border-width: 1px; 
    border-color: #7dc246; 
    color: #7dc246; 
} 

/**Changing style menu on small screen*/ 
.primary-menu-toggle:before { 
    color: #7dc246; background-color: #fff; 
} 

/**Buttons Signup Page*/ 
.btn.btn-primary.text-capitalize.m-0 { 
    border-radius: 5px; 
    background: #7dc246; 
    color: #fff; 
    padding: 15px; 
} 

.o-or-divider { 
    color: #7d7d7d; 
    font-size: 20px; 
    font-weight: bold; 
    padding-top: 115px; 
    text-align: center; 
} 

*, :after, :before { 
    box-sizing: border-box; 
} 

.o-or-divider:before { 
    top: -10px; 
} 

.o-or-divider:after, .o-or-divider:before { 
    position: absolute; 
    content: ""; 
    display: block; 
    padding: 55px 0; 
    border-left: 1px solid #7dc246; 
    left: 80px; 
} 

*, :after, :before { 
    box-sizing: border-box; 
} 

.o-or-divider:after { 
    top: 155px; 
} 

.o-or-divider:after, .o-or-divider:before { 
    position: absolute; 
    content: ""; 
    display: block; 
    padding: 55px 0; 
    border-left: 1px solid #7dc246; 
    left: 80px; 
} 

*, :after, :before { 

    box-sizing: border-box; 
} 

Answer 1

分周器が適切にセンタリングされていない、ちょうど左の追加：50％を。前と後：

.o-or-divider:after, .o-or-divider:before { 
    position: absolute; 
    content: ""; 
    display: block; 
    padding: 55px 0; 
    border-left: 1px solid #7dc246; 
    left: 50%; 
} 

Answer 2

実際には：beforeと：afterが中央に配置されていません。

次のルールにそれらの両方を持っていたはずです。それらのコンテナは、すでに彼らは、コンテナの非常に左から50％にpositionnedされますposition: relative;あるのでleft: 50%;

。前のための分周器の擬似要素の後に50％ `：

More infos about positionning in css