試圖創建兩個div

我想創建一個行會兩個div之間之間走線。不幸的是，我不能讓線在兩個div之間垂直對齊。上面的圖片是我目前正在獲取的圖片。下面是html。

.line { 
 
    vertical-align: middle; 
 
    margin-left: 120px; 
 
    margin-right: 200px; 
 
    border: 2px solid red; 
 
} 
 
section { 
 
    width: 100%; 
 
    margin: auto; 
 
} 
 
.home { 
 
    width: 20%; 
 
    margin-left: 50px; 
 
    float: left; 
 
} 
 
.logout { 
 
    width: 15%; 
 
    float: right; 
 
    margin-right: 50px; 
 
}

<section> 
 
    <div class="home">Home</div> 
 
    <div class="line"></div> 
 
    <div class="logout">Reports &nbsp; &nbsp; 
 
    <button> <a href="web url"> log out </a> 
 
    </button> 
 
    </div> 
 
</section>

我一直在使用一個小時標籤試過，但我不能得到這工作的。

來源

2016-04-24 ray

您可以使用Flexbox

section { 
 
    display: flex; 
 
    align-items: center; 
 
} 
 
.line { 
 
    height: 2px; 
 
    flex: 1; 
 
    background: red; 
 
    margin: 0 10px; 
 
}

<section> 
 
    <div class="home">Home</div> 
 
    <div class="line"></div> 
 
    <div class="logout">Reports 
 
    <button> <a href="web url"> log out </a> </button> 
 
    </div> 
 
</section>

來源

2016-04-24 20:32:01

哈。你以10秒的時間擊敗了我。我花時間打出我的答案，並提交給你已經在這裏看到你。 +1 –

@Chris Stanley對不起''）' –

感謝這對我有用。所以這將與除了Internet Explorer之外的所有內容兼容？ – ray

如果你不熟悉Flexbox的，但（我建議你變得如此，並按照發布的雷納德的答案），並希望其他解決方案，您可以簡單地在.line上使用position：relative並指定一個頂級值。從小提琴例如，你可以在下面找到拍攝

以下代碼：

.line { 
border:2px solid red; 
width:50%; 
margin:0 50px 0 100px; 
position:relative; 
top:10px; 
}

見fiddle

來源

2016-04-24 20:37:36 CZorio

試試這個，

 .line { 
    vertical-align:middle; 
    display:table-cell; 
    padding-left: 120px; 
    padding-right: 200px; 
    width:65%; 
    } 
    hr{ 
    border:1px solid red; 
    } 
    section { 
    width: 100%; 
    margin: auto; 
    display:table; 
    } 

    .home { 
    width: 20%; 
    padding-left:50px; 
    display:table-cell; 
    vertical-align:middle; 
    } 

    .logout { 
    width: 15%; 
    display:table-cell; 
    vertical-align:middle; 
    padding-right: 50px; 
    } 



    <section> 
<div class="home"> Home</div> 
<div class="line"> <hr> </div> 
<div class ="logout"> Reports &nbsp; &nbsp; 
<button> <a href="web url"> log out </a> </button> 
</div> 
</section>

見fiddle

來源

2016-04-24 20:59:21

試圖創建兩個div

回答

相關問題