Question

我试图创建一些CSS，在中心有一个图标或图像，两边都有一条线，但似乎我做错了什么并需要一些帮助。

为简单起见，我只在代码中使用星号。

<div class='line-container'><div class='line-icon'>*</div></div>

.line-icon {
text-align: center;
}

.line-icon::before {
width: 25%;
height: 1px;
border: 1px solid #ccc;
}

.line-icon::after {
width: 25%;
height: 1px;
border: 1px solid #ccc;
}

Answer 1

Try adding a content to your ::after and ::before, and setting its display:

.line-icon {
    text-align: center;
}

/* Joined both selectors, since were pretty much the same */
.line-icon::before,
.line-icon::after {      
    /* Styles kept */
    width: 25%;
    height: 1px;

    /* Changed to border-top (instead of border) to simulate a line better */
    border-top: 1px solid #ccc; 

    /* Styles added */
    display: inline-block;
    content: '';
  
    /* Use padding to vertical align the line */
    /* Use padding in em for a responsive icon height */
    padding-top: 0.5em; 
  
    /* Use margins to give the lines some spacement around the icon */
    /* Use margins in % for a responsive spacement */
    margin-left: 5%; 
    margin-right: 5%;
}

<div class='line-container'><div class='line-icon'>*</div></div>

Answer 2

不同的风格，但可能对你有用

＆＃13;

.seperator {
  padding: 0;
  border: 0px;
  border-top: 1px solid #ccc;
  color: #000;
  text-align: center;
}
.seperator:after {
  content: "vs";
  display: inline-block;
  position: relative;
  top: -0.7em;
  font-size: 1.5em;
  padding: 0 0.50em;
  background: #fff;
}

＆＃13;

<hr class="seperator"></hr>

＆＃13;

中心的图标或图像，两侧有线

2 个答案: