博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
CSS居中初探
阅读量:4325 次
发布时间:2019-06-06

本文共 599 字,大约阅读时间需要 1 分钟。

刚刚度过了实习期,进入了试用期。试用期依然会安排学习的任务。在学习中发现css的居中十分常用,做一个小小的探索。

一、水平居中

1.行内元素

可以直接使用text-align:center来解决。例如图片和文字等。

2.块级元素

2.1宽度确定的块级元素,使用margin-left:auto;和margin-right:auto;

2.2宽度不确定的块级元素:

a.用table包裹,再对table使用text-align:center。

b.将元素设置为display:inline,然后在使用textalign:center.

c.将父元素设置float:left;position:relative;left:50%;

   将子元素设置float:left;position:relative;left:-50%;

二、竖直居中

1.父元素高度不确定的文本、图片、块级元素:设置相等的上下边距。

2.父元素高度确定的单行文本:line-height设置为父元素的高度。

3.父元素高度确定的多行文本、图片、块级元素:

  a.用table嵌套,使用vertical-align:middle;

  b.设置display:table-cell;vertical-align:middle;

转载于:https://www.cnblogs.com/cherryblossom/p/4652160.html

你可能感兴趣的文章
kibana的query string syntax 笔记
查看>>
基于Lua插件化的Pcap流量监听代理
查看>>
旋转变换(一)旋转矩阵
查看>>
thinkphp3.2.3 bug集锦
查看>>
[BZOJ 4010] 菜肴制作
查看>>
C# 创建 读取 更新 XML文件
查看>>
KD树
查看>>
VsVim - Shortcut Key (快捷键)
查看>>
C++练习 | 模板与泛式编程练习(1)
查看>>
HDU5447 Good Numbers
查看>>
08.CXF发布WebService(Java项目)
查看>>
java-集合框架
查看>>
RTMP
查看>>
求一个数的整数次方
查看>>
点云PCL中小细节
查看>>
铁路信号基础
查看>>
Django 学习笔记(五) --- Ajax 传输数据
查看>>
Spring boot 日志 Logback
查看>>
基于OWIN WebAPI 使用OAUTH2授权服务【授权码模式(Authorization Code)】
查看>>
[深入Maven源代码]maven绑定命令行参数到具体插件
查看>>