博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
css--水平居中,垂直居中,自适应宽度
阅读量:7073 次
发布时间:2019-06-28

本文共 778 字,大约阅读时间需要 2 分钟。

宽度自适应:就是元素的宽度根居里面的内容来变化;

一、宽度自适应的元素水平居中:

  1.宽度自适应的元素可以是:绝对位定、浮动元素、行内元素。而我们通常布局,肯定不会用行内元素,所以会选择,绝对定位或浮动。

  2.居中:这里我们应该会想到1/2、50%、一半等这些东西。

  

  上图中:黑色为body,深绿色需要在body中水平居中,并且宽度是自适应的。亮绿色,是一个多余的DIV,就是为了让深绿色的DIV水平居中。

  以下是实现代码:

  pos元素的float:left或都用position:absolute;都可以,因为这两个属可以宽度自适应。

  先这个多余的DIV亮绿色,水平50%移动(移动,可以用margin-left 或者 left)

  再让其内容深绿色向右水平移动50%(只能用right属性移动);

  那么这个深绿色,就会在黑色的body里居中了!

    
测试用的内内容测测试用的内容
 
*{ margin:0; padding:0;}body{background:#000000;}.pos{
float:left;margin-left:50%; background:#33CC33; padding:10px;}.boxA{position:relative;right:50%;background:#096;}

总结:外层的定位:需要是自适应宽度的;(float:left 或者 position:absolute;)

     内层的位定:需要是自动100%宽度的(相对于外层100%);

         并且是可以移动出外层范围的;

        (所以只能用position:relative;别无选择!)

转载地址:http://ytkml.baihongyu.com/

你可能感兴趣的文章
MySQL5.6 主从复制 ERROR 1776 (HY000): Parameters MASTER_LOG_FILE
查看>>
mysql重启,重启释放ibtmp1
查看>>
我是一个线程(修订版) 转
查看>>
numpy二分查找
查看>>
DevExpress第三方控件使用实例之ASPxPopupControl弹出子窗体
查看>>
【视频】ASP.NET Core MVC 2.* 入门
查看>>
有关java中static关键的重写问题
查看>>
【Android】使用SearchView时软键盘不支持actionSearch的问题
查看>>
url请求返回结果测试工具(CURL)
查看>>
虚拟机安装教程
查看>>
java对文件的检索
查看>>
Marquee滚动字幕设置(转)
查看>>
linux系统下调度数据库类型资源库中的kettle job
查看>>
8UFTP
查看>>
VC 2005 解决方案的目录结构设置和管理
查看>>
吾爱论坛浏览器分享
查看>>
java内存模型优化建议
查看>>
解决Ubuntu Kylin 1610安装ANSYS17.2的NVIDIA显卡驱动问题
查看>>
Linux下如何修改Apache根目录
查看>>
JAVA入门[2]-安装Maven
查看>>