網站首頁 網站建設 公司動態 行業新聞 案例展示 關于我們

文章內容

關于使用line-height單行文本的垂直居中問題

日期:2013-11-29  來源:攀枝花惠康網絡公司

在前端開發中經常用line-height界說行高和單行文本的垂直居中,當然偶然也配合的做其他的垂直居中。
對應的劇本特征為lineHeight。

語法:

先寫個height、line-height都為25px,布景為紅色的元素,設置文字為12px。然后量下,文字膳縵沔是6像素,文字下面是8像素。。同時增添或者削減height、line-height 1px發現如不美觀當前值是奇數那1px會加到文字和底部空間里而削減時減失蹤的是文字和頂部空間的1px(加下減上);為偶數時剛好相反:加上減下。當我們給文字加下劃線的時辰發現文字的垂直位置并沒變,這能聲名什么呢?還不太必定,繼續同時減小heighe、line-height直到一個合適的值:14px,這時辰我們可以看到文字和下劃線都是完整的,繼續減小1px。這時IE已經不按我們適才發現的端方處事了,文字膳縵沔被截去1px,這樣看來14px應該是IE認為的一個臨界點,此時整體凹凸減去文字高度剛好為3px。會不會集。。。因為這時文字是頂這上鴻溝的,我們把文字增添到2行,發現了吧,第二行的文字不是頂這第一行的下劃線的,而是有1px的距離。3px不美觀真是下劃線的高度。


number 設置數字,此數字會與當前的字體尺寸相乘來設置行間距。

line-height : normal | number | length | %

參數:

normal 默認。設置合理的行間距。

<div style="height:30px;line-height:30px;background:red;color:#FFFFFF;font-size:12px;">文字字</div>

length 設置固定的行間距。
% 基于搗炙抵體尺寸的百分比行間距。


先來看看根基的語法和屬性值:

聲名:

檢索或設置對象的行高。即字體最底端與字體內部頂端之間的距離。
如行內包含多個對象,則應用最年夜行高。此時行高不成為負值。

下面說聳ё儋說說line-height單行文本的垂直居中問題

方案2、加overflow:hidden:

其拭魅這里還有一點非凡的處所就是如不美觀我們一路頭把height、line-height都設為30px那這時2px會變為3px。這個可以用我們膳縵沔得出的“偶數情形加上減下的結論”詮釋:heighe、line-height同為30px的時辰上下空白區域高度差是3px,然后height、line-height同時加1px(就是31px),這1px應該是加到上部空間里,所以3pxbug會釀成2pxbug。

IE6-IE8都有這個問題,firefox,Opera,Safari也都存在這個問題,
好比:

<div style="height:25px;line-height:25px;background:red;color:#FFFFFF;font-size:12px;">文字字</div>

————————————————————–

如圖:2009-05-24_164111

文字膳縵沔是6像素,文字下面是8像素。(轉載請注明出處:WEB前端開發 http://www.css88.com/)

<div style="height:25px;line-height:28px;background:red;color:#FFFFFF;font-size:12px; overflow:hidden">文字字</div>

再如:

ie下:文字膳縵沔是8像素,文字下面是11像素;firefox,Opera,Safari下:文字膳縵沔是9像素,文字下面是10像素;

算一下我們就可以知道,其實沒帶下劃線的12px文字在顯示的時辰都是11像素。
有2個相對解決方案;
方案1、加padding-top:(轉載請注明出處:WEB前端開發 http://www.css88.com/)

<div style="height:22px;line-height:22px; padding-top:3px;background:red;color:#FFFFFF;font-size:12px;">文字字</div>

文章來源:攀枝花惠康網絡公司

惠康網絡,是一家專業從事攀枝花網站建設,攀枝花網站制作,攀枝花網站設計公司,提供網站建設一條龍服務(網站域名注冊+網站服務器租用+網站開發+網站維護+網站營銷推廣),惠康網絡立足攀枝花,輻射全中國,攀枝花惠康網絡的客戶已經遍布國內各地大中小城市,我們高效優質的網站建設服務深受用戶好評。

客服熱線:tel(謝先生)  客服QQ:1323605005  
服務郵箱:[email protected](售前咨詢)  [email protected](技術部)  [email protected](售后服務)
公司地址:四川省攀枝花市
郵編:617200

青海十一选五开奖图