星空网 > 软件开发 > 网页设计

自适应居中

一、窗体居中

position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; /*height: 50px; width: 165px; */ 

简析:

  position:固定位置显示(absolute|fixed);

    【absolute:窗口大小由上层position为absolute、fixed、relative的子父关系窗口决定;fixed:窗口大小由上层层position为fixed的子父关系窗口决定】

  top,right,bottom,left:设置偏移量(<value>|auto);

    【设置为auto时,表示窗口在该方向不居中显示;如:left:auto,则窗口在水平位置不居中显示】

  margin:自适应布局(auto);

    【窗口只会在都为auto的方向上居中】

  height,widht:可设置,也可不设置(<value>|auto);

    【不设置则由top,right,bottom,left决定大小】

二、文字、图片混合自适应居中

.nav { position: relative;float: left;width: 220 px;height: 45 px;cursor: pointer;line - height: 45 px;text - align: center;vertical - align: middle;color: #fff;font - size: 18 px;font - weight: 600; }.nav.nav - item { position: absolute;top: 0;right: 0;bottom: 0;left: 0;margin: auto;height: 25 px;line - height: 25 px;display: table - caption; }  .nav span { position: relative;top: 0;bottom: 0;height: 25 px;padding - left: 30 px;display: inline - block; }  .nav img { position: absolute;top: 0;left: 0;width: 25 px;height: 25 px;z - index: 10 }

简析:

  .nav:限制窗口大小;

    【text-align:限制span水平居中】

  .nav-item:控制内容垂直居中;

    【display:限制内容并排显示】

  .nav span:限制图片显示范围;

    【padding-left:为图片留下显示空间;display:适应显示】

  .nav img:限制图片大小与显示位置;




原标题:自适应居中

关键词:

*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。

什么是响应式独立站?跨境卖家为什么需要响应式独立站?:https://www.ikjzd.com/articles/1678944636158373890
独立站只有加购没人买?优化商品评论,转化率提升20%!:https://www.ikjzd.com/articles/1678949024222441473
客单价、转化率太低?可能是没用这个独立站低成本AI!:https://www.ikjzd.com/articles/1678949340975669250
独立站运营要做什么?和亚马逊平台运营有什么区别?:https://www.ikjzd.com/articles/1678949559721205762
阿里跨境直播爆单,做对了什么?独立站能做直播吗?:https://www.ikjzd.com/articles/1678949855193145345
德媒:阿里巴巴国际站在德国市场收效显著:https://www.ikjzd.com/articles/1678979192306999298
TEMU亚马逊美国站ASTMF3186-17、16CFR1270成人活动床栏安全要求:https://www.kjdsnews.com/a/1836339.html
一线丨访曹县产业带,看中国传统服饰出海如何杀出一个春天?:https://www.kjdsnews.com/a/1836340.html
相关文章
我的浏览记录
最新相关资讯
海外公司注册 | 跨境电商服务平台 | 深圳旅行社 | 东南亚物流