CSS – 利用 vertical-align:middle 垂直居中元素容器


前言

以前总是以为 vertical-aligntext-align 是同样的道理,一个是垂直居中,一个是水平居中。

vertical – align

vertical-align 属性设置元素的垂直对齐方式,该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐,允许指定负长度值和百分比值。

这会使元素降低而不是升高,在表单元格中,这个属性会设置单元格框中的单元格内容的对齐方式。

【第一种用法】: 先看后面一句“在表单元格中,这个属性会设置单元格框中的单元格内容的对齐方式。”这很容易理解,如果给一个表格的 td 加一个 vertical-align:middle 的样式,表格里面的内容会垂直居中,同样的如果给一个 vertical-align:bottom 就会底部对齐,如果给一个 vertical-align:top 就会顶部对齐。

【第二种用法】: 该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐。假设有两个行内元素 a 和 b ,a 和 b 都是 div,当 a 加了一个 vertical-align:middle 样式之后, b 的底部(基线)就会对齐 a 的中间位置,如下图:

CSS - 利用 vertical-align:middle 垂直居中元素容器

如果 a 和 b 都加了一个 vertical-align:middle 样式,那么就互相对齐了对方的中间位置,也就是它们在垂直方向上的中线对齐了,如下图:

CSS - 利用 vertical-align:middle 垂直居中元素容器

现在我要让 class=“box” 的 div 在 class=“wrapper” 的 div 里面垂直居中,我可以在 class=“wrapper” 的 div 里面加一个 div 空标签,把它的高度设为 100%,宽度设置为 0,再给它一个 vertical-align:middle 样式,同样的给 class=“box” 的 div 一个 vertical-align:middle 样式,那么 box 就可以在 div 里面垂直居中了。

<div class="wrapper">
<div class="box"></div>
<div class="help"></div>
</div>

.wrapper{
width: 500px;
height: 500px;
background-color: pink;
text-align: center;
}

.box{
width: 100px;
height: 100px;
background-color: deepskyblue;
display: inline-block;
vertical-align: middle;
margin: 0 auto;
}

.help{
width: 0;
height: 100%;
display: inline-block;
vertical-align: middle;
}

效果:
CSS - 利用 vertical-align:middle 垂直居中元素容器

原创:https://www.panoramacn.com
源码网提供WordPress源码,帝国CMS源码discuz源码,微信小程序,小说源码,杰奇源码,thinkphp源码,ecshop模板源码,微擎模板源码,dede源码,织梦源码等。

专业搭建小说网站,小说程序,杰奇系列,微信小说系列,app系列小说

CSS - 利用 vertical-align:middle 垂直居中元素容器

免责声明,若由于商用引起版权纠纷,一切责任均由使用者承担。

您必须遵守我们的协议,如果您下载了该资源行为将被视为对《免责声明》全部内容的认可-> 联系客服 投诉资源
www.panoramacn.com资源全部来自互联网收集,仅供用于学习和交流,请勿用于商业用途。如有侵权、不妥之处,请联系站长并出示版权证明以便删除。 敬请谅解! 侵权删帖/违法举报/投稿等事物联系邮箱:2640602276@qq.com
未经允许不得转载:书荒源码源码网每日更新网站源码模板! » CSS – 利用 vertical-align:middle 垂直居中元素容器
关注我们小说电影免费看
关注我们,获取更多的全网素材资源,有趣有料!
120000+人已关注
分享到:
赞(0) 打赏

评论抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

您的打赏就是我分享的动力!

支付宝扫一扫打赏

微信扫一扫打赏