如何将按钮和文本内联对齐

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

Answer 2

DEMO

HTML 删除了h1代码，因为没有结束，甚至没有在css中找到

  

注意：使用font-size - 32px因为h1 tag = 32px

<div class="oferts">
    <div class="container">  
        Bucura-te de ofertele noastre alaturi de familia ta 
        <button class="oferts-button">
            <a href="#">Vezi toate beneficiile terapiilor</a>
        </button>
    </div>
</div>

CSS 将此类添加到CSS

.container
{
    line-height: 300px; 
    text-align: center;
    font-weight:bold;
    font-size:32px;
}