首頁 > web前端 > html教學 > html如何實現文字上下居中

html如何實現文字上下居中

藏色散人
發布: 2022-12-30 11:12:31
原創
45085 人瀏覽過

html實作文字上下居中的方法:先建立一個HTML範例檔案;然後建立一個文字方塊;接著定義Text的height屬性;最後透過css中「vertical-align:middle;」等屬性實作文本上下居中即可。

html如何實現文字上下居中

本教學操作環境:Windows7系統、HTML5&&CSS3版,DELL G3電腦。

推薦:css影片教學

讓HTML中的文字方塊中的文字垂直居中

#當你自己定義了Text 的height 屬性時,在Text 中輸入的文字都不是垂直居中的,不過你可以添加CSS來控制它,讓輸入的文字垂直居中,使網頁更完美

<html>
<head>
<style type="text/css">
    #text {
        height:20px;
        vertical-align:middle;
        line-height:20px;  /*line-height must be equal to height*/  
    }
</style>
</head>
<body>
    <div>
        <input type="text" id="text">
    </div>
</body>
</html>
登入後複製

加入verticla-align 、line-height 兩個屬性後,文字方塊中的文字就在文字方塊中垂直居中了,要注意的是line-height 必須要等於height。

以上是html如何實現文字上下居中的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板