试图创建两个div

Question

我想创建一个行会两个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>

我一直在使用一个小时标签试过，但我不能得到这工作的。

Answer 1

您可以使用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>

Answer 2

如果你不熟悉Flexbox的，但（我建议你变得如此，并按照发布的雷纳德的答案），并希望其他解决方案，您可以简单地在.line上使用position：relative并指定一个顶级值。从小提琴例如，你可以在下面找到拍摄

以下代码：

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

见fiddle

Answer 3

试试这个，

 .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