border: 1px solid #000;
margin: 50px auto;
}
.son {
width: 200px;
height: 200px;
background-color: pink;
border: 1px solid #000;
margin-top: 149px; // 根据父盒子的高度指定 margin-top 即可
}
二、盒子水平居中的方法
1、使用 margin: 0 auto;
.father {
width: 500px;
height: 500px;
background-color: skyblue;
border: 1px solid #000;
margin: 50px auto;
}
.son {
width: 200px;
height: 200px;
background-color: pink;
border: 1px solid #000;
margin: 0 auto; // 让盒子左右自动适应,想当于 left:auto; right:auto
}
2、通过计算 margin 左右边距来实现居中
.father {
width: 500px;
height: 500px;
background-color: skyblue;
border: 1px solid #000;
margin: 50px auto;
}
.son {
width: 200px;
height: 200px;
background-color: pink;
border: 1px solid #000;
margin-left: 149px; // 父盒子的定宽的,指定 margin-left 即可
}
3、先让盒子左右边缘和父盒子垂直的中心线垂直,然后把子盒子往回移动自身宽度的一半
/* 通过 transform 实现*/
.father {
width: 500px;
height: 500px;
background-color: skyblue;
border: 1px solid #000;
margin: 50px auto;
}
.son {
width: 200px;
height: 200px;
background-color: pink;
border: 1px solid #000;
margin-left: 50%; // 先移动父盒子的一半
transform: translateX(-50%); // 再移动自身盒子一半
}
/通过 定位实现/
.father {
width: 500px;
height: 500px;
background-color: skyblue;
border: 1px solid #000;
margin: 50px auto;
position: relative;
}
.son {
width: 200px;
height: 200px;
background-color: pink;
border: 1px solid #000;
position: absolute;
left: 50%; // 向右移动父盒子一半
margin-left: -100px; // 向左移动自身盒子一半
/* transform: translateX(-50%); */ //向左移动自身盒子一半 38 }
4、把盒子转成 行内块,然后用 text-align 属性使盒子水平居中
.father {
width: 500px;
height: 500px;
background-color: skyblue;
border: 1px solid #000;
margin: 50px auto;
text-align: center; // 让父盒子设置水平居中
}
.son {
width: 200px;
微信开发者工具 vue代码怎么都是白色字体 微信开发者工具text居中
转载本文章为转载内容,我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题,欢迎原作者联系我们进行内容更正或删除文章。
提问和评论都可以,用心的回复会被更多人看到
评论
发布评论
相关文章
-
加入华为云开源共创,让优秀开发者支持更优秀开发者
华为云联合开发者将开源项目合入社区并发布云商店。让开源项目获取更广泛的曝光和用户反馈的同时,也为开发者提供了商业变现通路,促进开源产品商业化发展。
开源项目 技术支持 DTSE Airflow CNCF -
微信开发者工具超出换行 微信开发者工具text居中
这个系列的上一篇教程,教大家写了一个最简单的 Hello world 微信小程序。但是,那只是一个裸页面,并不好看。今天接着往下讲,如何为这个页面添加样式,使它看上去更美观,教大家写出实际可以使用的页面。所有示例的完整代码,都可以从 GitHub 的代码仓库[1]下载。 一、总体样式微信小程序允许在顶层放置一个app.wxss文件,里面采用 CSS 语法设置页面样式。这个文件的设置,对所有页面都
微信开发者工具超出换行 修改title样式 小程序登录页面代码 小程序订单点击不同页面 页面jlabel背景色设置 -
mysql 两种类型 只保留其中一种
和数据库打交道总会用到事务,最近经典就是银行转账的例子。用户A给用户B转账,具体到程序中有一系列的操作,比如查询余额、做加减法、更新余额等,这些操作必须保证是一体的,不然等程序查完之后,还没做减法之前,A这 100 块钱,完全可以借着这个时间差再查一次,然后再给C转账,如果银行这么弄就乱套了,这时就要用到“事务”这个概念了。事务就是要保证一组数据库操作,要么全部成功,要么全部失败。
mysql 两种类型 只保留其中一种 mysql删除重复数据只保留一条 mysql去重复 保留一条 mysql时间差 mysql查询本月第一周