css中有居中对齐方法?

奋进前端 2020-06-03 03:36:21
请高人总结一下,大家来学习。
...全文
679 8 打赏 收藏 转发到动态 举报
AI 作业
写回复
用AI写文章
8 条回复
切换为时间正序
请发表友善的回复…
发表回复
㼛思雨 2020-06-15
  • 打赏
  • 举报
回复
对于文本的话,text-align:center、 对于容器的话,可以用外边距,margin:0 auto; 容器得话也可以直接用绝对定位,position:absolutel; top:50%; left:50%;
Lucky^ 2020-06-12
  • 打赏
  • 举报
回复
text-align:center
sqwu 2020-06-12
  • 打赏
  • 举报
回复
vertical-align:middle text-align:center
a19960404abc 2020-06-11
  • 打赏
  • 举报
回复
https://www.cnblogs.com/dreamperson/p/9367008.html 试试flax布局
超可爱波比 2020-06-10
  • 打赏
  • 举报
回复
水平居中的方法有 块状元素 margin:0 auto 行内元素 text-align:center 垂直水平居中的方法 1.块元素方法一: 用absolute定位,此时需要给其父元素添加position:relative;定位后设置top,left为50%,再把margin-top,margin-left的值设置成元素自身宽度的一半。(适用于已知宽高的元素) 2. 块元素方法二: 用absolute定位,此时需要给其父元素添加position:relative;定位后设置top:0; bottom:0; left:0; right:0; margin:auto; (未知宽高的元素也适用) 3.块元素方法三: 用absolute定位,此时需要给其父元素添加position:relative;定位后设置top:50%; left:50% ; transform:translate(-50%,-50%) ; (未知宽高的元素也适 用) 4.行元素 text-align:center; height:50px; line-height:50px;(让行高与高度一致,即可让文字垂直居中)
  • 打赏
  • 举报
回复
左右居中对齐可以定位加变换移动啊
/* 第一种方式 定位+margin
left top中的百分比相对于父级标签宽高的百分比
缺陷:图片必须知道图片的宽高

*/
/* #wrap img{
width: 200px;
height: 300px;
position: absolute; */
/* 左上角居中 */
/* left: 50%;
top: 50%; */
/* 移动图片宽高的一半 */
/* margin-left: -100px;
margin-top: -150px;
} */


/* 第二种方式:定位加移动
移动两个值,x轴的平移大小,y轴的平移大小 如果使用百分比,相对于标签的宽高而言
*/
/* #wrap img {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
} */
sha虫剂 2020-06-04
  • 打赏
  • 举报
回复
关于居中,建议直接度娘,居中的方法百度能直接找齐
Let dreams fly 2020-06-03
  • 打赏
  • 举报
回复
常用的text-align:center、margin:0 auto、justify-content:center 或者就是定位position实现

61,129

社区成员

发帖
与我相关
我的任务
社区描述
层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。
社区管理员
  • HTML(CSS)社区
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧