web前端—小技巧(解决部分不常见问题)

                                                                                                                           —来自自学未入行的前端菜

1.由letter-spacing属性导致文字不居中;

问题:在使用letter-spacing设定文字间距后,会导致文字整体不居中(原因似乎是间距不是2个文字同时移动产生一个间距,而是左边文字相对右边文字移动产生的间距,因此用了该属性后会导致文字整体相对父元素不居中,分析的可能不是很有道理,只为自己理解起来更方便,更容易记住这种特殊)。

解决办法:添加text-indent属性,值与letter-spacing值相同,此时文字整体会显示居中(具体解决原理还没有想透彻,不过暂时性解决了问题)

该方法参考自:css - 设置letter-spacing之后设置文字text-align:center不能居中? - SegmentFault


2.p元素内文字垂直方向居中;

问题:P元素内文字垂直方向不居中的问题,单行可直接设置行高(处理起来比较简单),但多行就比较麻烦:

解决办法:假设P元素计算后高度为100px(包括上下margin值等),根据设定的文字大小(这里假设为18px,一定要单独设定font-size大小,防止因继承样式或者浏览器默认字体大小导致问题),来估算一下多行文字外加行间距整体的高度(假设有3行文字,粗略估计多行文字整体高度为60px),然后设定上下margin值为20px(可根据视觉效果自行调整),设定行高(根据前面文字整体高度60px/3行)为20px,然后微调至你想要的效果即可!

该方法是我目前能想到的最好的,在此之前在网上有搜索过相关问题,只看到一个相关的(可能是我找的方式不对),但我觉得里面提供的几种方法都不太友好(在这儿我就不贴出来了,有兴趣的可以自行搜索)。



根据实际使用情况不定期更新,如有更好的方法可在评论中指出,欢迎探讨:)


最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • CSS格式化排版 1、字体 我们可以使用css样式为网页中的文字设置字体、字号、颜色等样式属性。下面我们来看一个例...
    张文靖同学阅读 1,322评论 0 3
  • 本文主要是起笔记的作用,内容来自慕课网. 认识CSS样式 CSS全称为“层叠样式表 (Cascading Styl...
    0o冻僵的企鹅o0阅读 2,682评论 0 30
  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,862评论 1 92
  • 本课来自http://www.imooc.com/learn/9请不要用作商业用途。 HTML5 HTML介绍 H...
    PYLON阅读 3,350评论 0 5
  • 1.CSS基本概念 1.1 CSS的定义 CSS(Cascading Style Sheets)层叠样式表,主要用...
    寥寥十一阅读 1,905评论 0 6