有時候 Input 的 text 或 textarea 有時候預設的對齊可能不盡理想
這時候可以用 vertical-align,這主要是用來對齊圖片的
但有時候你會想讓 textarea 對齊隔壁的物件,因為沒有此參數的話他會對齊 textarea 的底線
這裡再列個w3沒列到的參數
參考資料 :
1) https://www.w3schools.com/cssref/pr_pos_vertical-align.asp
2) https://stackoverflow.com/questions/45852388/webkit-baseline-middle-and-moz-middle-with-baseline
這時候可以用 vertical-align,這主要是用來對齊圖片的
但有時候你會想讓 textarea 對齊隔壁的物件,因為沒有此參數的話他會對齊 textarea 的底線
textarea {
vertical-align:25px; // 向上修正 25px
}
也有支援其他參數,但 w3schools 已有列表這邊不在贅述這裡再列個w3沒列到的參數
// for firefox
textarea {
vertical-align: -moz-middle-with-baseline;
}
// for chrome
textarea {
vertical-align: -webkit-baseline-middle
}
效果為對齊text的底線參考資料 :
1) https://www.w3schools.com/cssref/pr_pos_vertical-align.asp
2) https://stackoverflow.com/questions/45852388/webkit-baseline-middle-and-moz-middle-with-baseline