在div中设置文字与内部div垂直居中
生活随笔
收集整理的這篇文章主要介紹了
在div中设置文字与内部div垂直居中
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
要實現如圖一所示的結果：
html代碼如下：
相應的less代碼
.content{width: 500px;height: 200px;border:1px solid red;position: relative;line-height: 200px;/*讓class=content父div中的文字垂直居中*/span{background: green;}.box{background: yellow;float: left;width: 200px;height: 100px;line-height: 100px;/*讓黃色div中的文字內容垂直居中*/text-align: center;/*讓文字水平居中*/position: absolute;top:50%;margin-top: -50px;margin-left: 200px; } }②使用vertical-align:middle設置在父元素中的位置，
效果圖：
html代碼：
相應的css代碼：
.content{width: 500px;height: 200px;line-height: 200px;/*設置其文字內容垂直居中*/border:1px solid red;.pox{background: yellow;width: 200px;height: 70px;display: inline-block; /*一定要將div設置為inline-block*/vertical-align: middle;/*設置該元素在父元素中的位置*/line-height: 70px;border: 1px solid green;text-align: center;} }化簡后的核心代碼：
.content{width: 500px;height: 200px;line-height: 200px;/*設置其文字內容垂直居中*/background:red;.pox{height: 70px;/*給內部div設置了高度，該div才會垂直居中*/display: inline-block; /*一定要將div設置為inline-block*/vertical-align: middle;/*設置該元素在父元素中的位置*/background: yellow;} }總結
以上是生活随笔為你收集整理的在div中设置文字与内部div垂直居中的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 绝对定位的div图片居中自适应
- 下一篇： asp.net web开发步骤_WEB开