关于垂直居中

前端7班 陆恩泽
在网页布局中,我们经常需要对div区块,文本和图片进行垂直居中,以便达到美观的效果。上一次直播课中也讲到了这一个知识点。所以我讲具体的方法做一下整理。

文本垂直居中

有两种方法,(1)另行高line-height等于外层容器高度height; (2)上下padding设置相等。

图像垂直居中

方法一

display:table-cell;
vertical-align:middle;

方法二:在内层容器内加一个空元素.

.item2:before{ content: ''; display:inline-block; height: 100%; vertical-align: middle;}.item2 img{ vertical-align: middle;}

div区块居中

div{
margin:0 auto;
}

回来有点,先就这么多哈!

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

推荐阅读更多精彩内容

  • 垂直居中,是前端的基本操作,我主要在两种情况下进行简单的实现。分别为: 已知高度(指自身高度) 未知高度简单的ht...
    Hunter_Gu阅读 159评论 0 0
  • 这几天一直在鼓捣Ubuntu,进度有点落下了....哈哈。我终于可以在ubuntu里上b站了(就是不支持独显---...
    知更鸟_b4d4阅读 238评论 0 0
  • 垂直居中我们经常到会处理这种问题,但是对于各种不同的情况,自己是否又能够解决的得心应手呢?? line-heigh...
    fzhange阅读 277评论 0 0
  • 书接上文,本次我们来谈谈怎样根据需求来做到合适的垂直居中。 1.文字居中-line-height; 在文字垂直居中...
    早安马丁阅读 538评论 0 0
  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,790评论 1 92