最近在看编写高质量代码--Web前端开发修炼之道一书,发现里面有很多东西是以前不知道或则不熟悉的,希望把它记录下来.
1.水平居中
(1)文本、图片等行内元素的水平居中
给父元素设置text-align:center可以实现文本、图片等行内元素的水平居中,代码如下:
(2)确定宽度的块级元素的水平居中
确定宽度的块级元素的水平居中是通过设置margin-left:auto和margin-right:auto来实现的,代码如下:
(3)不确定宽度的块级元素的水平居中
不确定宽度的块级元素有三种方式实现水平居中。
方法二:
方法三:
2.竖直居中
(1)父元素高度不确定的文本、图片、块级元素的竖直居中
父元素高度不确定的文本、图片、块级元素的竖直居中是可以通过给父元素设置相同上下边距实现。代码如下:
父元素高度确定的单行文本竖直居中是通过给父元素设置line-height来实现的,line-height值和父元素的高度值相同。