CSS常用布局

1.左中右布局/左右布局

1)通过浮动进行布局,用clearfix消除bug


图1

2.水平居中

1)内联元素水平居中(父元素添加text-align:center进行水平居中)


图2

2)块级元素水平居中(margin-left和margin-right设置为auto)


图3

3.垂直居中

1)内联元素垂直居中(在内联元素的父元素中添加line-height,且行高与字体相比大一点。


图4

2)块级元素垂直居中(top为父元素高度的一半)


图5

4.多个块级元素水平居中(使每个块级元素的display设置为 inline-block,然后将它们的父元素的text-align设置为center)


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

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 14,679评论 1 92
  • 一、左右布局 1.table:table的li实现 实现原理: table标签是能够具有实现左右布局的属性,也是我...
    鼻鼻_0632阅读 3,674评论 0 1
  • 一、前言 HTML常用标签有 、 、 和 以及 、 、 和 等。虽然标签种类繁多,但通常分为两类:块级元素(blo...
    JaniceZD阅读 3,968评论 3 3
  • 记得看过傅盛的一篇文章,标题就是“最重要的事情只有一件”。对于傅盛的能力、猎豹的国际化,第一感觉是十分靠谱也十分拼...
    way菜畦阅读 3,783评论 1 5
  • 8月24日下午,我院五楼小会议室燕园医院管理直播课堂播出了《医患关系的文化心理背景》讲座,由北京大学心理学博士韩菁...
    窦睿2017阅读 3,644评论 0 0