前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >各种水平垂直居中

各种水平垂直居中

作者头像
大当家
发布2018-06-28 19:15:55
1K0
发布2018-06-28 19:15:55
举报
文章被收录于专栏:webweb

单行文本:

      水平居中:

代码语言:javascript
复制
 text-align:center

     垂直居中:

代码语言:javascript
复制
line-height=容器高度

多行文本:

代码语言:javascript
复制
文本设置<span>标签
  span{
                     display: table-cell;
                     vertical-align: middle;
                     text-align: center;
   }
父元素设置
                  display: table;

图片水平居中:

方法1:table法

代码语言:javascript
复制
     容器div设置
         display: table-cell;
         text-align: center;
         vertical-align: middle;
     div下的img 设置
         vertical-align: middle;

   背景发法(不利于动态图片的导入)

代码语言:javascript
复制
容器div设置
  background-size:200px 200px;
               background: url() center no-repeat

 div垂直居中:

代码语言:javascript
复制
 position定位 万能法
                自身:div{
        width: 200px;
        height: 200px;
        border: 1px solid red;
        position: relative;
        left: 50%;
        top:50%;
        margin: -100px 0 0 -100px;
        }     //  margin-left和margin-top 为负自身长度的一半

 div水平居中:

代码语言:javascript
复制
  margin:0 auto;
本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2017-03-31 ,如有侵权请联系 cloudcommunity@tencent.com 删除

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

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

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

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