码迷,mamicode.com
首页 > 其他好文 > 详细

vertical-align垂直对齐用法

时间:2019-01-02 20:44:15      阅读:216      评论:0      收藏:0      [点我收藏+]

标签:就是   lin   ble   一个   设置   inline   block   直接   middle   

一、垂直对齐方式{vertical-align:middle/top/bottom;}

  <img>垂直对齐方式:1)给自身加vertical-align;再设置line-height即可;

            注意:img会受文字影响自带行高需加font-size:0;去除影响;

            2)给img标签设置参照物,也就是在同级内添加一个空标签,将其空标签高度设置为父元素高度(height:100%;),再给自身加vertical-align;

            3)将img的父元素转换成table-cell(display:table-cell;),直接给img加vertical-align;

            注意:父元素转成table-cell,margin和padding将不再对其元素产生作用。

  其他内联元素垂直对齐:将内联元素转为行内块元素(display:inline-block;)再如上img操作即可。

vertical-align垂直对齐用法

标签:就是   lin   ble   一个   设置   inline   block   直接   middle   

原文地址:https://www.cnblogs.com/liufuyuan/p/10210882.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!