ruo he chuang jian: wénzi fenjie xian

ruo he chuang jian xiangying xing wénzi fenjie xian

di yi bu - tian jia HTML:

<div class="divider">Lorem Ipsum</div>

di er bu - tian jia CSS:

.divider {
  font-size: 30px;
  display: flex;
  align-items: center;
}
.divider::before, .divider::after {
  flex: 1;
  content: '';
  padding: 3px;
  background-color: red;
  margin: 5px;
}

zishen shi yi yi

li mingshi jie shi:

ben li jiao nín ru he shi yong CSS chuang jian yi ge wénzi fenjie xian. Ji shu shi, tā shi yong le HTML he CSS de zuhe lai shi xian zhe yi xiao guo.

shou xian, nín xuyao zai HTML zhong tian jia yi ge dai you le leiming "divider" de <div> yuan su, bing zai zhong li fang zai nín xiang xian shi de wénzi (zai zhe ge li, wénzi shi "Lorem Ipsum")).

ren wei .divider lei shèzhì le xie shi. Nín shèzhì le zi ti daoxing wei 30 xiang su, shi yòng flex bu ju, bing shèzhì align-items: center; lai shi wénzi zai fenjie xian zhong shuizhi jùzhong.

jie zhe, nín shi yòng xun yuan yuansu ::before he ::after lai wei fenjie xian tian jia liang cai de zhuangshi. Zhe liang ge xun yuan yuansu dou shèzhì le flex: 1 lai shi ta men ju zhan .divider yuan su zhong chu chu wénzi zhi wai de suoyou kongjian. Nín hai shèzhì content: '' lai queren zhe liang ge xun yuan yuansu shi kong de, bu hui bao huan ren he neirong.

sannan, shezhe nei bianju, beijing yanse he wai bianju lai dingyi fenjie xian de style. Zai zhe ge li, fenjie xian de yanse shi hongse, bing you you xie nei bianju he wai bianju.