CSS vertical-align

有時候 Input 的 text 或 textarea 有時候預設的對齊可能不盡理想

這時候可以用 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

Read More