如何在表單內對齊SVG按鈕

Question

我嘗試創建一個包含兩個輸入和一個按鈕的表單。 我寧願使用SVG代替文本按鈕，但它無法正確對齊。

假設以下CSS和HTML：

 body { background: #222; margin: 25px; } form { border: 1px solid #444; padding: 2px; } input { border: 1px solid transparent; background: #444; color: #ddd; margin-left: 6px; padding: 3px 5px; } input:focus { outline: 0; border: 1px solid #666; } button { border: 0; padding: 0; background: transparent; margin-left: 6px; height: 23px; width: 23px; fill: #bbb; } button:focus { outline: 0; fill: #ddd; } 

 <form> <input type="email" id="email" /> <input type="password" id="password" /> <button type="submit"> <svg viewBox="0 0 1024 1024"> <path d="M384 512h-320v-128h320v-128l192 192-192 192zM1024 0v832l-384 192v-192h-384v-256h64v192h320v-576l256-128h-576v256h-64v-320z" /> </svg> </button> </form> 

運行代碼段時，輸入字段在底部對齊，但SVG按鈕在頂部對齊。 如果我將SVG替換為文本，則可以很好地對齊。

Answer 1

您需要在input s旁邊對齊button本身。 我們使用vertical-align: middle在form vertical-align: middle每個元素的vertical-align: middle以實現相同的目標。

 body { background: #222; margin: 25px; } form { border: 1px solid #444; padding: 2px; } form * { vertical-align: middle; } input { border: 1px solid transparent; background: #444; color: #ddd; margin-left: 6px; padding: 3px 5px; } input:focus { outline: 0; border: 1px solid #666; } button { border: 0; display: inline-block; padding: 0; background: transparent; margin-left: 6px; height: 23px; width: 23px; fill: #bbb; } button:focus { outline: 0; fill: #ddd; } 

 <form> <input type="email" id="email" /> <input type="password" id="password" /> <button type="submit"> <svg viewBox="0 0 1024 1024"> <path d="M384 512h-320v-128h320v-128l192 192-192 192zM1024 0v832l-384 192v-192h-384v-256h64v192h320v-576l256-128h-576v256h-64v-320z" /> </svg> </button> </form> 

Answer 2

只需添加vertical-align：middle; 選擇器。

 body { background: #222; margin: 25px; } form { border: 1px solid #444; padding: 2px; } input { border: 1px solid transparent; background: #444; color: #ddd; margin-left: 6px; padding: 3px 5px; } input:focus { outline: 0; border: 1px solid #666; } button { border: 0; padding: 0; background: transparent; margin-left: 6px; height: 23px; width: 23px; fill: #bbb; /*Just add this line to your target element to align in the middle*/ vertical-align: middle; } svg{margin:auto;} button:focus { outline: 0; fill: #ddd; } 

 <form> <input type="email" id="email" /> <input type="password" id="password" /> <button type="submit"> <svg viewBox="0 0 1024 1024"> <path d="M384 512h-320v-128h320v-128l192 192-192 192zM1024 0v832l-384 192v-192h-384v-256h64v192h320v-576l256-128h-576v256h-64v-320z" /> </svg> </button> </form>