Page layout skills

Parent spreader achieve high internal width div elements:

父div添加属性:overflow:hidden;

When the child element positioning, not distraction parent element, because the child element has been out of the text flow

Arbitrary vertical and horizontal centering element method (single centrally Similarly):

position:absolute;
left:50%;
top:50%;
transform:translate(-50%,-50%);    移动元素自身高宽的一半,因为定位时元素有自身高宽

Vertical center vertica-align: middle, is applied to the sub-element row element in the parent element plus font-size: 0px and line-height: ...; achieve precise centering, or there will be a deviation

非图片在父元素上设置vertical-align:center;
图片在自身上设置vertical-align:center;

text-align: center; applies to a sub-element row element

Vertically centered way: by using the reference line elements of line
to be centered image after adding text, the parent element set high and the parent element row same high, then set font-size: 0px, can achieve image centered vertically

Published 252 original articles · won praise 3 · Views 3249

Guess you like

Origin blog.csdn.net/weixin_43294560/article/details/103911298