zoukankan      html  css  js  c++  java
  • Web前端面试指导(十四):如何居中一个元素(正常、绝对定位、浮动元素)?

    题目点评

    这道题目的提问比较多,连续问了三个问题,正常元素、绝对定位元素、互动元素如何居中,而且居中没有说清楚是垂直居中还是水平居中,要回答清楚这个问题,必须得有深厚的功底,而且要分类的来回答,条理要清楚。可以先把水平居中各种情况说清楚,然后在把垂直居中说清楚。

    (一)元素水平居中的方式

    1)行级元素水平居中对齐(父元素设置 text-align:center)      

    [html] view plain copy
     在CODE上查看代码片派生到我的代码片
    1. <div style=" 200px; height: 100px;border: 1px solid;text-align:center;">    
    2.     <span>行级元素垂直居中</span>     
    3. </div>   

              

    2)   块级元素水平居中对齐(margin: 0 auto)

    [html] view plain copy
     在CODE上查看代码片派生到我的代码片
    1.  <div style=" 200px; height: 100px;border: 1px solid;text-align: center;">  
    2.      <div style="border: 1px solid red;margin: 0 auto;height: 50px; 80px;"> 块级元素水平居中</div>  
    3. </div>  

    3)浮动元素水平居中

    • 宽度不固定的浮动元素
    html代码
    [html] view plain copy
     在CODE上查看代码片派生到我的代码片
    1. <div class="outerbox">  
    2.  <div class="innerbox">我是浮动的</div>  
    3. </div>  

    CSS样式

    [css] view plain copy
     在CODE上查看代码片派生到我的代码片
    1. .outerbox{  
    2. float:left;   
    3. position:relative;   
    4. left:50%;   
    5. }   
    6. .innerbox{    
    7. float:left;   
    8. position:relative;   
    9. right:50%;   
    10. }  

    • 宽度固定的互动元素
    html代码
    [html] view plain copy
     在CODE上查看代码片派生到我的代码片
    1. <div class="outerbox">  
    2.    <div>我是浮动的</div>  
    3. </div>  

    css代码

    [css] view plain copy
     在CODE上查看代码片派生到我的代码片
    1. .outerbox{  
    2.     background-color:pink; /*方便看效果 */    
    3.     width:500px ;   
    4.     height:300px/*高度可以不设*/  
    5.     margin-150px 0 0 -250px/*使用marin向左移动250px,保证元素居中*/  
    6.     position:relative;   /*相对定位*/  
    7.     left:50%;  
    8.     top:50%;  
    9. }  

        4)让绝对定位的元素水平居中对齐

      这种方式非常独特,大家一定要记牢这种方式,会用这种方式的薪资待遇必然高出几千¥

    [css] view plain copy
     在CODE上查看代码片派生到我的代码片
    1. .center{  
    2.          positionabsolute/*绝对定位*/  
    3.          width500px;  
    4.          height:300px;  
    5.          backgroundred;  
    6.          margin0 auto/*水平居中*/  
    7.          left: 0/*此处不能省略,且为0*/  
    8.          right: 0/*此处不能省略,且为0*/  
    9. }  

    经验分享:水平居中的主要属性有

    1. text-alin:center;

    2. margin:0 auto

    3. position:relative|absolute; left:50%;

    (二)元素垂直居中对齐

    1)对行级元素垂直居中(heiht与line-height的值一样)

    [css] view plain copy
     在CODE上查看代码片派生到我的代码片
    1. height:300px;  
    2. line-height:300px;  

    2)对块级元素垂直居中对齐

    2.1 父元素高度固定的情况

    1)父元素的height与line-height值相同

    2)需要垂直居中的元素

     vertical-align:middle;// 垂直居中对齐

     display:inline|inline-block 块级元素转行级元素

    HTML代码

    [html] view plain copy
     在CODE上查看代码片派生到我的代码片
    1. <div class="center">  
    2.     <div class="inner"></div>  
    3. </div>  
    CSS代码
    [css] view plain copy
     在CODE上查看代码片派生到我的代码片
    1. .center{  
    2.     width500px;  
    3.     height:300px;  
    4.     line-height300px;  
    5.     border:1px solid;  
    6. }  
    7.  .inner{  
    8.      backgroundblue;  
    9.      width300px;  
    10.      height100px;  
    11.      display: inline-block;  
    12.      vertical-alignmiddle;  
    13.  }  

    2.2 父元素高度不固定的情况

     父元素的padding-top和padding-bottom一样 

    --------------------------------------------------------------------------------------------------------------------
    如果看不懂,可以看视频操作,代码演示 http://www.chuanke.com/3885380-190205.html
  • 相关阅读:
    CSS3—— 2D转换 3D转换 过渡 动画
    CSS3——边框 圆角 背景 渐变 文本效果
    CSS3——表单 计数器 网页布局 应用实例
    CSS3——提示工具 图片廓 图像透明 图像拼接技术 媒体类型 属性选择器
    CSS3——对齐 组合选择符 伪类 伪元素 导航栏 下拉菜单
    CSS3——分组和嵌套 尺寸 display显示 position定位 overflow float浮动
    CSS3——盒子模型 border(边框) 轮廓(outline)属性 margin外边距 padding填充
    Eclipse连接数据库报错Local variable passwd defined in an enclosing scope must be final or effectively final
    数据库——单表查询
    数据库——添加,修改,删除
  • 原文地址:https://www.cnblogs.com/bchjazh/p/6061636.html
Copyright © 2011-2022 走看看