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

Related Posts:

  • CSS Selector PriorityCSS 在套用的時候,是有優先順序的。 沒研究前我以為是程式碼先後或最靠近的element <table id='table'> <tr> <td><table class='subtable'>...</table></td> <td><table class='subtable'>...</table></td>… Read More
  • JQuery 自動將 Listener 作用於動態新增的 ElementAdding event listeners to dynamically added elements 拿 click 舉例 $(".myclass").click(function(){ // do something }); 若在整個網頁讀取完後,才新增 class = 'myclass' 的 element 不會有這個 Event Listener 這時要用 on $('#mydiv').on('click', '… Read More
  • PHP 日期加減PHP 日期加減 1. mktime() $date1 = date ("Y-m-d H:i:s" , mktime(date('H'), date('i'), date('s'), date('m'), date('d')-1, date('Y'))); $date2 = date ("Y-m-d H:i:s" , mktime(date('H'), date('i'), date('s'), date('m'), date('d'), da… Read More
  • Notepad++ 進階用法 Notepad++ 進階用法 列模式編輯 舉例 : 在 windows 的 cmd 下 dir > 123.txt,並用 Notepad++打開。 假如想要將時間移動欄位,按著 Alt 拉框框。 剪下,並想要的位置貼上 同步異位編輯 參考資料 : https://www.kjnotes.com/devtools/19 … Read More
  • 網頁開發(4) JQuery Datepicker 日期選擇器這次要記錄的是 JQuery 中的 Datepicker 其實 Datepicker 是 JQuery UI 裡的一個部件 以下連結可以載 JQuery UI http://jqueryui.com/download/ 載完後就 Link 到自己的檔案裡就可以使用 <link rel="stylesheet" type="text/css" href="jQuery/ui.css"/> <… Read More

0 意見:

張貼留言

Popular Posts