CSS wordpress中的中心文本

我在Wordpress中創建了一個網站，並且我創建了一個新的模板頁面。可以在http://jobboard.jobsbe.be/test/

我已經添加了一些CSS，使頁面看起來像我想，但有一件事，我無法找到如何讓它工作。

當你看到頁面時，你會看到我使用了一個分隔符，在兩個分隔符之間使用了「OR」。

我試過了解我在互聯網上發現的一切，但我無法在兩個分隔符之間找到「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; 
}

來源

2017-03-24 WouterS

只需使用'左：50％'的前後分隔的僞元素。「OR」這個詞實際上居中，但分隔符不是。 – Terry

請[閱讀此]（http://meta.stackoverflow.com/questions/254428/something-in-my-web-site-or-project-doesnt-work-can-i-just-paste-a-link然後在問題本身中創建一個[MCVE]：尋求調試幫助的問題（「爲什麼這個代碼不工作？」）必須包含所需的行爲，特定的問題或錯誤以及必需的最短代碼在問題本身**中重現它**。 – Pete

分隔線會被不正確置，只需添加左：50％;到之前和之後：

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

來源

2017-03-24 11:51:06

不錯，非常感謝！ – WouterS

其實它是你的：之前和之後：之後是不居中。

你應該有他們兩個以下規則：left: 50%;

由於它們的容器已經是position: relative;他們將在50％從最左邊的容器來positionned。

More infos about positionning in css

來源

2017-03-24 11:53:34 Fahrenheit

CSS wordpress中的中心文本

回答

相關問題