龙空技术网

前端 UI 样式:3.0 CSS如何实现垂直居中样式?::before和::after

代码开发 238

前言:

此时兄弟们对“css after before”大概比较关怀,看官们都想要剖析一些“css after before”的相关内容。那么小编同时在网摘上汇集了一些关于“css after before””的相关知识,希望我们能喜欢,大家一起来了解一下吧!

外层边框部分高度固定,内部块级结构居中

html结构:

//<!-- - ->注释掉空格<div class="verMiddle outerLayerWrap"> <div class="innerLayer"></div></div>

style样式:

//通用样式.verMiddle::before{ display: inline-block; vertical-align: middle; content: ''; height: 100%; width: 0; overflow: hidden;}//外层样式.outerLayerWrap{ width:100px; height:100px; border:1px solid #ccc; text-align:center;}//内层样式.innerLayer{ width:40px; height:40px; background:red; vertical-align:middle; display:inline-block;}

标签: #css after before