图标或图像在中间，两边有线

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

尝试添加内容到您的::after和::before，并设置其显示:

.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

不同的样式，但可能对u有用

.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;
}

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