css 居中比较常用的一种的方法

在工作学习中 经常遇见剧中的问题,有时候UI 设计图会根据产品的原型切图,标注,划线等等, 但是真正到fe手中的时候却又有可能因为兼容的问题,造成部分不兼容or乱码的现象,so 我总结了我经常用的一种菜鸡的方法,回头大家可以试一下,新手菜鸟,还望轻拍~~~
1 text-align :
text-align 属性规定元素中的文本的水平对齐方式;
一般行级元素的基本上的对齐都是用text-align 但是区块级别的div并不生效 ,但是这个能对于div的内容生效,所以text-align都是内容居中对齐的首选。
文字进行编辑排版的时候一种简单的逻辑思维就完全可以用div 将文字包起来 ,然后直接text-align:center,就能搞定了,一般常用于一行文字,标题之类的做法~
2margin :
margin的常用于div的布局之中,对于居中来说,如果不是一行文字而是一块文字,UI的要求居中,这时候可以结合margin去进行布局

例如
image.png

这个样子的布局 一般直接margin : 0 auto 就直接搞定了

3 混合应用:

image.png

如果做成这个样子捏? 下面的c....in....space也在中间,这就需要margin 和 text-align 合并用起来两行代码就能搞定了

对了 一般用div包文字的时候,宽度高度都尽量不进行设定,除了应用margin的情况下,因为文字都是有宽高的 一般情况下会自动撑起来,这样布局之后不同框架不同的兼容情况下,出现乱行的情况会很少~

一般的用法 简单的用法 还望各位大神轻拍~~ ahhhhh

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

推荐阅读更多精彩内容

  • CSS 是什么 css(Cascading Style Sheets),层叠样式表,选择器{属性:值;属性:值}h...
    崔敏嫣阅读 1,515评论 0 5
  • 一 外部式css样式 (也可称为外联式)就是把css代码写一个单独的外部文件中,这个css样式文件以“.css...
    KunMitnic阅读 991评论 0 1
  • 在页面布局中,居中在各种各样的场景中广泛被用到,也经常被新人提及。以前做过一些自己探索居中问题的demo,今天翻出...
    彬_仔阅读 343评论 0 6
  • 一、CSS入门 1、css选择器 选择器的作用是“用于确定(选定)要进行样式设定的标签(元素)”。 有若干种形式的...
    宠辱不惊丶岁月静好阅读 1,650评论 0 6
  • 1.块级元素和行内元素 块级(block-level)元素;行内(内联、inline-level)元素。 块元素的...
    饥人谷_小侯阅读 2,067评论 1 4