自动居中对齐 html,css如何居中对齐?
在我们开发前端页面的时候,为了让页面效果美观,会出现需要居中效果的地方。下面本篇文章就来给大家介绍一下使用CSS设置居中对齐的方法,希望对大家有所帮助。
1、text-align:center —— 水平居中
仅对文字、图片、按钮等行内元素有效(display设置为inline或inline-block等)进行水平居中
2、margin:0 auto; —— 水平居中
仅水平居中,且对浮动元素定位无效.father{
width:500px;
height:200px;
background-color::#f98769;
overflow:hidden;//不可缺少否则margin-top不生效
}
.son{
width: 100px;
height: 100px;
margin:50px auto ;
background-color: #ff0000;
}
3、line-height —— 垂直居中
line-height=height ,仅对一行文字有效
4、使用表格 —— 水平、垂直居中
对td/th的align=‘center’和valign=‘middle’两属性可以水平和垂直居中
5、弹性布局 —— 水平、垂直居中.father{
display:flex;
justity-content:center;
align-items:center;
}
.father{
display:flex;
flex-direction:column;//改变主轴为cross axis
justity-content:center;
}
6、使用display:table-cell —— 水平、垂直居中
对于那些不是表格的元素,我们可以通过display:table-cell 来把它模拟成一个表格单元格.father{
height:300px;
background:#ccc;
display:table-cell; /*IE8以上及Chrome、Firefox*/
vertical-align:middle; /*IE8以上及Chrome、Firefox*/
text-align:center;
}
.son{
display:inline-block;//或是inline
}
7、奇淫技巧——子绝父相(已知子元素宽高) —— 水平、垂直居中.father{
position:relative;
}
.son{//m、n为子盒子宽、高的一半
position:absolute;
left:50%;
top:50%;
margin-left:-mpx;
margin-top:-npx;
8、未知子元素宽高 —— 水平、垂直居中.father {
position:relative;
}
.son {
position:absolute;
top:50%;
left:50%:
transform:translate(-50%,-50%) /*单独设置transform:translateY(-50%);*/
}
9、伪元素法 —— 垂直居中.father{
position: relative;
}
.father::before{
content: " ";
display: inline-block;
height: 100%;
width: 1%;
vertical-align: middle;
}
.son{
display: inline-block;
vertical-align: middle;
}
自动居中对齐 html,css如何居中对齐?相关推荐
- html块级元素对齐方式,CSS如何水平对齐块级元素
CSS 水平对齐 在 CSS 中,可以使用多种属性来水平对齐元素. 对齐块元素 块元素指的是占据全部可用宽度的元素,并且在其前后都会换行. 块元素的例子: 对于文本对齐,请参见 CSS 文本一章. 在 ...
- html盒子居中的方式,CSS盒子居中三种方法
前言 CSS盒子居中,我觉得是很有必要学习一下的.特别是第三种方法,奇淫技巧升级版,也是生产环境中非常常见的一种方法,不需要知道宽度,随着祖先元素的变化而变化! 1.常规方法 常规方法只需要给盒子设置 ...
- div css将文字居中显示图片,css文字居中、图片居中、div居中解决方案
一.文字居中 若文字只有一行 文本只有一行 .box { width: 200px; height: 200px; background-color: red; } .text { line-heig ...
- html文字两端对齐 w3school,CSS实现两端对齐效果
两端对齐,从概念上来说,其实不难理解.如果不明白什么叫两端对齐,可以玩玩word等办公软件. 下面谈谈如何实现文本的两端对齐.我所知道的大概有以下几种方法 text-align w3school指出, ...
- [css] 实现单行文本居中和多行文本左对齐并超出显示“...“
[css] 实现单行文本居中和多行文本左对齐并超出显示"-" .one {text-align: center }.multi {overflow: hiddentext-over ...
- Word2016多行公式在等号处对齐、自动编号和引用、公式居中且编号右对齐
Word2016创建多行公式.多行公式在等号处对齐.自动编号和引用.公式居中且编号右对齐 1. 创建多行公式 2. 多行公式在等号处对齐 3. 创建自动编号和引用 4. 公式居中且编号右对齐 相信很多 ...
- html图片怎么中心对齐,css图片居中(css怎么让图片水平居中对齐)
css图片居中 css图片居平分css图片水平居中和笔直居中两种状况,有时候还需要图片同时水平笔直居中,下面分几种居中状况别离介绍. css图片水平居中 运用margin:0auto完成图片水平居中 ...
- 设置左右上下对齐css,CSS上下左右居中
写在前面 有了transform.flex后,水平竖直居中已经很容易了,比如万能的: position: absolute; top: 0; bottom: 0; left: 0; right: 0; ...
- uilabel 左上对齐_UILabel一行居中对齐与多行左对齐
想来用过UIAlertView的都知道其中的文字内容是居中对齐(水平方向)的,如果只有一行文字还好,多行文字时如果最后一行撑不满宽度,也会显示居中效果,整体看起来怪怪的. 这其实就是其中的label控 ...
最新文章
- 解题报告(五)组合计数(ACM / OI)超高质量题解
- 深入浅出任务队列机制,非常浅
- Java基本类型和取值范围
- eclipse中output folder和deployment assembly用法有什么不同?
- 08.suggester02term_suggester
- Java LinkedHashMap的实现原理详解
- 拳王虚拟项目公社:网上做什么兼职副业比较容易挣到钱?虚拟资源项目是赚钱的最佳选择
- kubernetes之五:资源管理
- .Net向Page和UpdatePanel输出JS
- idea中导包的快捷键
- 个人简历表格 会计简历模板 个人简历模板手机版
- 机械手三维图 matlab,机械手的三维建模
- vue实现登录注册模板
- VS如何安装到电脑上
- 自我鉴定计算机专业大学,大学生计算机专业的自我鉴定书
- unity 下载文件到存放本地
- GitHub Desktop安装与使用教程
- 夏雨老师:告诉你常见颜色对人心理上的影响
- 设置文字最后一行,末尾自定义
- linux 下 PHP 环境搭建(已测试)