一、垂直對齊方式
垂直對齊方式: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
body img src 顯示和隱藏 tu.png alt 和文字是預設基線 baseline 對齊,這樣會導致下方出現3px的空隙,解決方法是使用其他的對齊方式,比如middle,top等等,vertical align大多是行內塊和文字的對齊方式,比如img和input body 1 和文字是預...
vertical align 垂直對齊方式
vertical align 垂直對齊方式 用在兩個或多個,內聯或者內聯塊元素垂直方向的對齊 值 描述 baseline預設。元素放置在父元素的基線上。sub垂直對齊文字的下標。super垂直對齊文字的上標 top把元素的頂端與行中最高元素的頂端對齊 text top把元素的頂端與父元素字型的頂端對...
css中vertical align垂直居中的認識
目標大綱 1.vertical align為何不起作用?vertical align只鍾情於 inline block內聯塊級元素 inline元素 vertical align屬性 text bottom是與父標籤的文字底部對齊 效果栗子 我是一段文字.2.如何消除下面的間隙是如何出現的?源 1 ...