2019年4月7日 星期日

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

Popular Posts