事業部在另一個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格作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

你甚至都不需要一個html元素爲您的VS-圈：

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

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

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