首頁(yè) 猿問(wèn) 關(guān)于字體水平居中問(wèn)題

關(guān)于字體水平居中問(wèn)題

CSS3 Html/CSS

nobcainiao 2016-01-23 17:11:06

<div?class="search-wrapper"> ???<i?class="iconfont?search-icon"></i> </div> .search-icon{ ????color:purple; ????font-size:24px; ????text-align:?center; ????/*margin-left:20px;*/ ????line-height:70px; }引用了字體圖庫(kù)，想讓其在div.search-wrapper內(nèi)水平垂直居中，現(xiàn)在水平居中用margin-left可以通過(guò)改變位置實(shí)現(xiàn)，但是我想用text-align實(shí)現(xiàn)結(jié)果無(wú)效，這是為什么，如果非得用text-align那應(yīng)該怎么做

查看完整描述

7 回答

已采納

尼克只賣烤

TA貢獻(xiàn)4條經(jīng)驗(yàn) 獲得超0個(gè)贊

你還可以用padding擠一下，上下居中用line-height也可用padding

反對(duì) 回復(fù) 2016-01-24

航洋無(wú)聲

TA貢獻(xiàn)4條經(jīng)驗(yàn) 獲得超6個(gè)贊

聽你的描述你貌似懂一點(diǎn) 還知道用text-alian ， ?但是你換了一個(gè)錯(cuò)。。。其實(shí)你的代碼沒(méi)有錯(cuò)。。。。text-align ,的意思是：“標(biāo)簽內(nèi)部的‘文本’和‘行內(nèi)元素’” 劇中。。。。但是你html里面的<i> 標(biāo)簽是行內(nèi)元素，<i>它自己的寬度也才和文字一樣寬，請(qǐng)問(wèn)你還想讓里面的文字居于<i>居中，是個(gè)什么意思？？？？

解決辦法：給外面的<div> css加上 display: text-align:center; ? 。。。這樣整個(gè)<i>標(biāo)簽都基于<div>居中了。。。。

1 反對(duì) 回復(fù) 2016-01-24

nobcainiao
不行，還是得用padding

回復(fù) 2016-01-31

鬧小志

TA貢獻(xiàn)75條經(jīng)驗(yàn) 獲得超42個(gè)贊

總結(jié)一下：

1、其實(shí)你的字體已經(jīng)居中了，只不過(guò)因?yàn)槟愕膇是行內(nèi)元素，寬度是靠里面的內(nèi)容撐起來(lái)的，也就是你的i的寬度就是字體的寬度，這樣即使居中了你也看不出來(lái)了呀～

2、很明顯你的意思是想要div中的內(nèi)容居中，既然你內(nèi)容里加了i標(biāo)簽，那解決辦法有兩個(gè)：

一是給div設(shè)置text-align;二是設(shè)置i的寬度和div的寬度一致，這樣i中字體居中，視覺上div中的內(nèi)容也居中了。

反對(duì) 回復(fù) 2016-01-25

nobcainiao
不行，還是得用padding

回復(fù) 2016-01-31

lucaliu

TA貢獻(xiàn)1條經(jīng)驗(yàn) 獲得超0個(gè)贊

text-align不是應(yīng)該設(shè)置在其父元素上么

.search-wrapper{

????text-align: center;

}

反對(duì) 回復(fù) 2016-01-24

stella_15

TA貢獻(xiàn)18條經(jīng)驗(yàn) 獲得超12個(gè)贊

.search-icon{
????color:purple;
????font-size:24px;
????text-align:?center;
????/*margin-left:20px;*/
????line-height:70px;
}
中text-align:?center;的意思是標(biāo)簽內(nèi)的文字相對(duì)于.search-icon樣式定義的寬度居中，如果要用這個(gè)樣式做居中，那.search-icon的寬度定義為100%即可；
div居中的寫法.search-icon居中，用left:50%; margin-left:-(.search-icon寬度的一半);

反對(duì) 回復(fù) 2016-01-23

nobcainiao
謝謝！還是padding好用些

回復(fù) 2016-01-31

7 回答
0 關(guān)注
2999 瀏覽

關(guān)注

最近中文字幕高清中文字幕无,亚洲欧美高清一区二区三区,一本色道无码道dvd在线观看 ,一个人看的www免费高清中文字幕

關(guān)于字體水平居中問(wèn)題

關(guān)于字體水平居中問(wèn)題

7 回答

相關(guān)問(wèn)題推薦

添加回答

最近中文字幕高清中文字幕无,亚洲欧美高清一区二区三区,一本色道无码道dvd在线观看 ,一个人看的www免费高清中文字幕

熱搜

最近搜索清空

關(guān)于字體水平居中問(wèn)題

關(guān)于字體水平居中問(wèn)題

7 回答

相關(guān)問(wèn)題推薦

添加回答