前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >css垂直居中怎么设置?文字上下居中和图片垂直居中

css垂直居中怎么设置?文字上下居中和图片垂直居中

作者头像
ytkah
发布2018-03-06 13:35:31
7.5K0
发布2018-03-06 13:35:31
举报
文章被收录于专栏:ytkahytkah

  css 居中分css垂直居中和css水平居中,水平居中平时比较常用,这里我们主要讲css上下居中的问题。垂直居中又分为css文字上下居中和css图片垂直居中,下面我们就分别来介绍一下。

css文字上下居中:一、单行内容的居中。只考虑单行是最简单的,无论是否给容器固定高度,只要给容器设置 line-height 和 height,并使两值相等,再加上 over-flow: hidden 就可以了。css代码为{height: 4em;line-height: 4em;overflow: hidden;}

  优点:1. 同时支持块级和内联极元素;2. 支持所有浏览器   缺点:1. 只能显示一行;2. IE中不支持<img>等的居中   要注意的是:1. 使用相对高度定义你的 height 和 line-height;2. 不想毁了你的布局的话,overflow: hidden 一定要

  二、多行内容居中,且容器高度可变。也很简单,给出一致的 padding-bottom 和 padding-top 就行

  优点:1. 同时支持块级和内联极元素;2. 支持非文本内容;3. 支持所有浏览器   缺点:容器不能固定高度

css图片垂直居中,我们只需要在CSS样式中加入如下CSS代码:img{ vertical-align:middle;}

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2017-02-21 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
相关产品与服务
容器服务
腾讯云容器服务(Tencent Kubernetes Engine, TKE)基于原生 kubernetes 提供以容器为核心的、高度可扩展的高性能容器管理服务,覆盖 Serverless、边缘计算、分布式云等多种业务部署场景,业内首创单个集群兼容多种计算节点的容器资源管理模式。同时产品作为云原生 Finops 领先布道者,主导开源项目Crane,全面助力客户实现资源优化、成本控制。
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档