服务热线 400-660-8066

珠海网站建设
首页 站内资讯

珠海网站建设

站内资讯
珠海网站建设 / 站内资讯 / 产品资讯 / 正文

网页前端切图之居中对齐方式

来源: All文章
发布时间:2023-05-05 10:35:41

  关于居中对齐,之前有记录了绝对定位、display:inline-block、margin-top和table-cell的几种对齐方式,还可以用绝对定位和transform,如下图:

  这个是不需要固定的宽度和高度,设置translate成50%就可以了,它的偏移是根据元素的宽高的50%。

  如果只是需要移动端使用,用flex布局也很不错,如下图:

  不过应用于PC端就要考虑兼容性的问题了。

  记了这么一些关于垂直居中的,关于水平居中,行内元素例如span的要设置水平居中,需要在它的父元素设置text-align:center;

  块状元素需要划分是确定宽度和不确定宽度;确定宽度的块状元素需要设置margin:0auto;margin的上下可以按自己需求设置。不确定宽度的块状元素,例如p,可以用table,把p放进table的td里面,将table设置margin:0auto;

  或者采用另一方法,将不确定宽度的块状元素p设置display:inline;改变类型,然后它的父级元素设置text-align:center;用来实现想要的效果。

* 文章来源于网络,如有侵权,请联系客服删除处理。
在线 咨询

添加动力小姐姐微信

微信 咨询

电话咨询

400-660-8066

我们联系您

电话 咨询
微信扫码关注动力小姐姐 X
qr