划过另一个div

Question

这就是我想要的：

这是我创建的代码：

HTML

<div class="main_container">
 <div class="team1">team 1</div>
 <div class="vs">VS</div>
 <div class="team2">team 2</div>
</div>

CSS

.team1, .team2 {
    position: relative;
    float: left;
    width: 30%;
    background-color: #FFFFFF;
    border-radius: 8px;  
    z-index: 1;
    height: 50px;
   }

   .vs { 
    float: left; 
    border-radius: 50%;
    background-color: #0099CC;
    z-index: 2;
    width: 100px;
    height: 100px;
   }

   .main_container {
    margin-left: auto;
    margin-right: auto;
    width: 80%;
    text-align: center;
    border: 1px solid #000;
   }

结果就是这个

（fiddle）当然，这不是我想要的。你有什么想法吗？

修改

为了让它变得更容易，我可以考虑放置一个div并在上面添加一个cicle：

这可能是一个更好的主意吗？

Answer 1

尝试

.vs { 
    position:absolute;
    left:0;
    right:0;
    top: 20px;
    margin: auto;
}

另外，请确保您有

.main_container {
    margin-top:40px;
}

查看更新的fiddle

Answer 2

将team*和vs div设置为display: inline-block;并垂直对齐它们：

.team1, .team2 {
    position: relative;
    width: 40%;
    background-color: #D8D8D8;
    border-radius: 8px;
    height: 30px;
}
.team1, .team2, .vs {
    display: inline-block;
    vertical-align: middle;
    margin: 0 -5px;
}
.vs {
    position: relative;
    border-radius: 50%;
    background-color: #0099CC;
    z-index: 2;
    width: 80px;
    height: 80px;
    opacity: 0.999;
    z-index: 1;
}
.main_container {
    margin: 0 auto;
    width: 80%;
    text-align: center;
    background: #EEE;
}

<div class="main_container">
    <div class="team1">team 1</div>
    <div class="vs">VS</div>
    <div class="team2">team 2</div>
</div>

Answer 3

使用display: inline-block和vertical-align: middle;

.team1, 
.team2,  
.vs {
    position: relative;
    display: inline-block;
    vertical-align: middle;
        width: 40%;
    background-color: #D8D8D8;
    border-radius: 8px;  
    z-index: 1;
    height: 30px;
   }   
.vs {    
    border-radius: 50%;
    background-color: #0099CC;
    z-index: 2;
    width: 80px;
    height: 80px;
}   
.main_container {
    margin-left: auto;
    margin-right: auto;
    width: 80%;
    text-align: center;
}

 <div class="main_container">
      <div class="team1">team 1</div>
      <div class="vs">VS</div>
      <div class="team2">team 2</div>
 </div>

Answer 4

你的vs-circle甚至不需要html元素：

http://codepen.io/anon/pen/XbKNPB

＆＃13;

＆＃13;

.main_container {
  background-color: #eee;
  border-radius: 25px;
  margin-top: 50px;
  padding: 20px 40px;
  position: relative;
  width: 400px;
}
.main_container:after {
  border: 1px solid #999;
  border-radius: 100%;
  color: #111;
  content: "vs.";
  font-size: 32px;
  background-color: #fff;
  width: 80px;
  height: 80px;
  text-align: center;
  position: absolute;
  left: 200px;
  top: -20px;
  line-height: 72px;
}
.team1,
.team2 {
  position: absolute;
  top: 10px;
}
.team1 {
  left: 40px;
}
.team2 {
  right: 40px;
}

＆＃13;

<div class="main_container">
  <span class="team1">team 1</span>
  <span class="team2">team 2</span>
</div>

＆＃13;

＆＃13;

＆＃13;