搜文章
推荐 原创 视频 Java开发 iOS开发 前端开发 JavaScript开发 Android开发 PHP开发 数据库 开发工具 Python开发 Kotlin开发 Ruby开发 .NET开发 服务器运维 开放平台 架构师 大数据 云计算 人工智能 开发语言 其它开发
Lambda在线 > Python人工智能课程与学习 > CSS元素居中的几种方法

CSS元素居中的几种方法

Python人工智能课程与学习 2019-11-08

css是网页界面编码的语言,操作自由灵活,以后还是个方向,喜欢的同学可以学习学习。

1、水平居中

例如: 


关键点在 子元素的margin设置,父元素text-align:center


代码如下:

<div style="text-align:center;"> <span stlye="margin:auto"> 2相关课程 </span></div>

2、垂直居中

垂直居中主要是设置行高

方法一、

<div style="text-align:center;height:50px;"> <span stlye="margin:auto;line-height:50px;"> 2相关课程 </span></div>

方法二、

<div style="text-align:center;height:50px;">  <span style="position: relative;top:50%;  transform:translateY(-50%);"  >   2相关课程   </span></div>

方法三、使用flex


<div style="display: flex;align-items: center;justify-content: center;height:500px;background-color: #1d7db1"> <span style="background-color: #722ed1;color: white;font-size: 30px;"> 水平居中,垂直居中 </span></div>

以上css控制元素居中的操作,在写界面和代码的时候,经常用到。注意以后多使用css3的标准,比较简单。

版权声明:本站内容全部来自于腾讯微信公众号,属第三方自助推荐收录。《CSS元素居中的几种方法》的版权归原作者「Python人工智能课程与学习」所有,文章言论观点不代表Lambda在线的观点, Lambda在线不承担任何法律责任。如需删除可联系QQ:516101458

文章来源: 阅读原文

相关阅读

关注Python人工智能课程与学习微信公众号

Python人工智能课程与学习微信公众号:whatsthink

Python人工智能课程与学习

手机扫描上方二维码即可关注Python人工智能课程与学习微信公众号

Python人工智能课程与学习最新文章

精品公众号随机推荐