方法一:
利用 vertical-align:middle 进行垂直方向上的居中对齐, 此方法需要满足的条件:
设置父元素的行高 line-height 等于父元素 height 的高度
子元素必须是行内块级元素 display:inline-block;
子元素设置 vertical-align:middle
此方法在开发中不能右浮动 (不能靠右边)
下方是完整代码, 可以新建一个 html 文件进行测试 (绿色的盒子):
web 前端开发学习 Q-q-u-n: 731771211, 分享学习的方法和需要注意的小细节, 不停更新最新的教程和学习方法 (详细的前端项目实战教学视频)
- <HTML>
- <head>
- <title > 导航条 </title>
- <meta charset="utf-8" />
- </head>
- <style>
- *{
- margin:0;
- padding:0;
- }
- .div1{
- height:200px;
- background:yellow;
- /* 行高等于容器高度 */
- line-height:200px;
- }
- .div2{
- width:100px;
- height:100px;
- background:green;
- /* 行内块级元素 */
- display:inline-block;
- /* 中线和父元素基线上方出对其, 参考字母 "x"*/
- vertical-align:middle;
- }
- .div3{
- width:100px;
- height:100px;
- background:red;
- display:inline-block;
- }
- </style>
- <body>
- <div class="div1">
- xxxxxxxxxxx
- <div class="div2">
- </div>
- <div class="div3">
- </div>
- </div>
- </body>
- </HTML>
方法二:
这种方法比较暴力, 利用定位解决:
父元素开启相对定位
子元素绝对定位
子元素先向下移动父元素的 50%, 此时子元素的顶部与父元素的中线对齐了
子元素再向上移动自身高度 "height" 的一半, 此时子元素的中线和父元素的中线对齐了
此方法可以右对齐, 设置子元素 right:0px; 即可
下方是完整代码, 可以新建一个 HTML 文件进行测试 (绿色的盒子):
- <HTML>
- <head>
- <title > 导航条 </title>
- <meta charset="utf-8" />
- </head>
- <style>
- *{
- margin:0;
- padding:0;
- }
- .div1{
- height:200px;
- background:yellow;
- /* 相对定位开启 */
- position:relative;
- }
- .div2{
- width:100px;
- height:100px;
- background:green;
- /* 绝对定位 */
- position:absolute;
- /* 可以右对齐 */
- right:0px;
- /* 先向下移动父元素的 50%, 此时子元素的顶部与父元素的中线对齐了 */
- top:50%;
- /* 再向上移动自身高度 "height" 的一半, 此时子元素的中线和父元素的中线对齐了 */
- margin-top:-50px
- }
- </style>
- <body>
- <div class="div1">
- <div class="div2">
- </div>
- </div>
- </body>
- </HTML>
自己是一个 6 年的前端工程师, 希望本文对你有帮助!
这里推荐一下我的前端学习交流扣 qun:731771211 , 里面都是学习前端的, 如果你想制作酷炫的网页, 想学习编程. 自己整理了一份 2019 最全面前端学习资料, 从最基础的 HTML+CSS+JS[炫酷特效, 游戏, 插件封装, 设计模式] 到移动端 HTML5 的项目实战的学习资料都有整理, 送给每一位前端小伙伴, 每天分享技术
点击: 加入
来源: http://www.jianshu.com/p/0169d1c75845