已解決430363個問題，去搜搜看，總會有你想問的

關于字體水平居中問題

首頁猿問關于字體水平居中問題

關于字體水平居中問題

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; }引用了字體圖庫，想讓其在div.search-wrapper內水平垂直居中，現在水平居中用margin-left可以通過改變位置實現，但是我想用text-align實現結果無效，這是為什么，如果非得用text-align那應該怎么做

查看完整描述

7 回答

已采納

尼克只賣烤

TA貢獻4條經驗獲得超0個贊

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

反對回復 2016-01-24

航洋無聲

TA貢獻4條經驗獲得超6個贊

聽你的描述你貌似懂一點還知道用text-alian ， ?但是你換了一個錯。。。其實你的代碼沒有錯。。。。text-align ,的意思是：“標簽內部的‘文本’和‘行內元素’” 劇中。。。。但是你html里面的<i> 標簽是行內元素，<i>它自己的寬度也才和文字一樣寬，請問你還想讓里面的文字居于<i>居中，是個什么意思？？？？

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

1 反對回復 2016-01-24

nobcainiao
不行，還是得用padding

回復 2016-01-31

鬧小志

TA貢獻75條經驗獲得超42個贊

總結一下：

1、其實你的字體已經居中了，只不過因為你的i是行內元素，寬度是靠里面的內容撐起來的，也就是你的i的寬度就是字體的寬度，這樣即使居中了你也看不出來了呀～

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

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

反對回復 2016-01-25

nobcainiao
不行，還是得用padding

回復 2016-01-31

lucaliu

TA貢獻1條經驗獲得超0個贊

text-align不是應該設置在其父元素上么

.search-wrapper{

????text-align: center;

}

反對回復 2016-01-24

stella_15

TA貢獻18條經驗獲得超12個贊

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

反對回復 2016-01-23

nobcainiao
謝謝！還是padding好用些

回復 2016-01-31

7 回答
0 關注
2964 瀏覽

關注

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

關于字體水平居中問題

關于字體水平居中問題

7 回答

相關問題推薦

添加回答

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

關于字體水平居中問題

關于字體水平居中問題

7 回答

相關問題推薦

添加回答