讓input文字框文字垂直居中程式碼例項
很多時候講究對稱美,也有時候講究不對稱的美,當然這個要分具體情況,在文字框中一般對稱一些更為美觀,下面就通過程式碼例項介紹如何實現文字框中的文字垂直居中對齊。
程式碼例項如下:
[HTML] 純文字檢視 複製程式碼<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style type="text/css"> #text{ height:50px; line-height:50px; } </style> </head> <body> <input type="text" id="text" value="螞蟻部落歡迎您"/> </body> </html>
以上程式碼實現了我們的要求,將height屬性值和line-height屬性值設定為相同即可。
相關文章
- css多行文字垂直居中程式碼例項CSS
- 當前文字框高亮效果程式碼例項
- textarea文字框高度自適應程式碼例項
- jQuery點選文字框清除內容程式碼例項jQuery
- CSS多行文字垂直居中效果CSS
- CSS 文字li元素中垂直居中CSS
- web前端技巧-文字如何垂直居中?多行文字如何實現上下居中?Web前端
- CSS input 文字框樣式CSS
- CSS input文字框樣式CSS
- CSS匹配input text文字框CSS
- CSS文字框與驗證碼垂直對齊CSS
- input文字框寬度自適應
- input文字框焦點背景變色
- CSS元素(文字、圖片)水平垂直居中方法CSS
- flex居中佈局程式碼例項Flex
- CSS3文字凹凸效果程式碼例項CSSS3
- JavaScript讀取文字檔案內容程式碼例項JavaScript
- input文字框獲取焦點伸縮效果
- CSS3文字陰影效果程式碼例項CSSS3
- JavaScript 點選複製選中文字程式碼例項JavaScript
- CSS 文字居中CSS
- Word 2007表格中文字設定左右和上下居中(水平和垂直居中)教程
- Flutter 疑難雜症系列:實現中文文字的垂直居中Flutter
- 小程式垂直居中
- html input文字輸入框的一些總結HTML
- 富文字框
- 裡的文字高度居中
- CSS 多行文字居中CSS
- IE8 input框內容上下居中
- 淺談居中問題(水平居中、垂直居中、水平垂直居中)
- CSS 例項之文字的凸起與凹陷CSS
- 初探富文字之CRDT協同例項
- 初探富文字之OT協同例項
- 文字框輸入文字倒計詳解
- 合併具有文字框的Word文件:VBA程式碼批次操作
- 垂直居中
- C# 讀取Word文字框中的文字、圖片和表格(附VB.NET程式碼)C#
- 動態新增或減少文字框,並獲取文字框值
- div垂直居中-CSS元素垂直居中方法CSS