html - 如何对齐按钮和内联文本

Question

我想将按钮和文本对齐在同一行中。

<div class="oferts">
    <div class="container" style="line-height: 300px; text-align: center;">
        <h1>Bucura-te de ofertele noastre alaturi de familia ta <button class="oferts-button"><a href="#">Vezi toate beneficiile terapiilor</a></button>
    </div>
</div>

button {
    background: transparent;
    color: #666;
    border: 1px solid #d4d4d4;
    padding: 10px 20px;
    margin: 0 10px 0 10px;
    transition: border .3s ease-in;
}
button:hover {
    border: 1px solid #909090;
    padding: 10px 20px 10px 20px;
}
button a {
    font-family: 'Raleway', sans-serif;
    color: #666;
    font-size: 14px;
}
.oferts-button a {
    font-family: 'Raleway', sans-serif;
    color: #fff;
}
.oferts-button:hover {
    border: 1px solid #fff;
}
.oferts {
    width: 100%;
    display: table;
    height: 300px;
    background:url(../img/back.jpg) center no-repeat;
}

Answer 1

您可以在两个元素上使用 vertical-align css 属性:

container {
    line-height: 300px;
    text-align: center;    
}
container > h1,
container > h1 a {
    vertical-align: middle;
}