2016-12-14 51 views
0

我有一個文本輸入框,並直接在它旁邊是一個按鈕。問題是當按鈕字體大小和輸入框字體大小不同時,按鈕將無法正確對齊。如何保持一個按鈕水平居中與輸入,如果他們有不同的字體大小?

Ex - 不同的字體大小。請注意該按鈕的底部延伸過去的輸入框比頂部

input{ 
 
    font-size:20px; 
 
} 
 

 
.btn { 
 
    padding: 8px 12px; 
 
    font-size: 14px; 
 
    border-radius: 2px; 
 
}
<input> 
 
<button class="btn btn-primary m-l">Add</button>

防爆更多:同字體大小:按鍵排列:

input{ 
 
    font-size:20px; 
 
} 
 

 
.btn { 
 
    padding: 8px 12px; 
 
    font-size: 20px; 
 
    border-radius: 2px; 
 
}
<input> 
 
<button class="btn btn-primary m-l">Add</button>

回答

1

我不確定這是最好的解決方案,但您可以通過給輸入一個高度並將兩個元素垂直對齊到中間來實現此目的。請參閱下面的代碼片段。

input{ 
 
    font-size:20px; 
 
    height: 30px; 
 
    vertical-align: middle; 
 
} 
 

 
.btn { 
 
    padding: 8px 12px; 
 
    font-size: 14px; 
 
    border-radius: 2px; 
 
    vertical-align: middle; 
 
}
<input> 
 
<button class="btn btn-primary m-l">Add</button>

+0

我去了這個答案,因爲它不需要flex。此外,我甚至不需要設置輸入高度 – apdm

+0

太棒了,很高興它有幫助。 – sol

1

使用CSS Flexbox。並申請align-items: center以使您的小孩<div>s垂直居中。在我來說,我使用body我的父元素

看一看下面的代碼片段:

input{ 
 
    font-size:20px; 
 
} 
 

 
.btn { 
 
    padding: 8px 12px; 
 
    font-size: 14px; 
 
    border-radius: 2px; 
 
    margin-left: 5px; 
 
} 
 

 
body { 
 
    display: flex; 
 
    align-items: center; 
 
}
<input> 
 
<button class="btn btn-primary m-l">Add</button>

希望這有助於!

1

簡單包裝內容爲.container股利和應用dispaly: flex它,並且應該爲你做的伎倆。

.container { 
 
    display: flex; 
 
} 
 

 
input{ 
 
    font-size:20px; 
 
    margin-right: 5px; 
 
} 
 

 
.btn { 
 
    padding: 8px 12px; 
 
    font-size: 14px; 
 
    border-radius: 2px; 
 
}
<div class="container"> 
 
    <input> 
 
    <button class="btn btn-primary m-l">Add</button> 
 
</div>

希望幫助(Y)。

+0

這很好,這是如何工作的? Flex是否只是使容器內的所有高度都一樣? – sol

相關問題