关于字体水平居中问题

Question

<div class="search-wrapper">    <i class="iconfont search-icon">&#xe60a;</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那应该怎么做

Answer 1

你还可以用padding挤一下，上下居中用line-height也可用padding

Answer 2

听你的描述 你貌似懂一点 还知道用text-alian ，  但是你换了一个错。。。其实你的代码没有错。。。。text-align ,的意思是：“标签内部的‘文本’和‘行内元素’” 剧中。。。。但是你html里面的<i> 标签是行内元素，<i>它自己的宽度也才和文字一样宽，请问你还想让里面的文字居于<i>居中，是个什么意思？？？？

解决办法： 给外面的<div> css加上 display: text-align:center;   。。。这样 整个<i>标签都基于<div>居中了。。。。

Answer 3

总结一下：

1、其实你的字体已经居中了，只不过因为你的i是行内元素，宽度是靠里面的内容撑起来的，也就是你的i的宽度就是字体的宽度，这样即使居中了你也看不出来了呀～

2、很明显你的意思是想要div中的内容居中，既然你内容里加了i标签，那解决办法有两个：

一是给div设置text-align;二是设置i的宽度和div的宽度一致，这样i中字体居中，视觉上div中的内容也居中了。

Answer 4

text-align不是应该设置在其父元素上么

.search-wrapper{

    text-align: center;

}

Answer 5

.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宽度的一半);