html5居中怎么让浮动不占位置 html如何居中浮动元素

转载

mob64ca140e0490 2023-12-05 18:28:23

文章标签 html5居中怎么让浮动不占位置垂直居中 html css 文章分类 HTML5 移动开发

题目点评

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

（一）元素水平居中的方式

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

1. <div style="width: 200px; height: 100px;border: 1px solid;text-align:center;">    
2. <span>行级元素垂直居中</span>     
3. </div>

html5居中怎么让浮动不占位置 html如何居中浮动元素_垂直居中

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

1. <div style="width: 200px; height: 100px;border: 1px solid;text-align: center;">  
2. <div style="border: 1px solid red;margin: 0 auto;height: 50px;width: 80px;"> 块级元素水平居中</div>  
3. </div>

html5居中怎么让浮动不占位置 html如何居中浮动元素_html_02

3）浮动元素水平居中

宽度不固定的浮动元素

html代码

1. <div class="outerbox">  
2. <div class="innerbox">我是浮动的</div>  
3. </div>

CSS样式

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代码

1. <div class="outerbox">  
2. <div>我是浮动的</div>  
3. </div>

css代码

1. .outerbox{  
2. background-color:pink; /*方便看效果 */    
3. width:500px ;   
4. height:300px; /*高度可以不设*/  
5. margin: -150px 0 0 -250px; /*使用marin向左移动250px，保证元素居中*/  
6. position:relative;   /*相对定位*/  
7. 50%;  
8. 50%;  
9. }

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

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

1. .center{  
2. position: absolute; /*绝对定位*/  
3. width: 500px;  
4. height:300px;  
5. background: red;  
6. margin: 0 auto; /*水平居中*/  
7. 0; /*此处不能省略，且为0*/  
8. 0; /*此处不能省略，且为0*/  
9. }

经验分享：水平居中的主要属性有
1. text-alin:center;
2. margin:0 auto
3. position:relative|absolute; left:50%;

（二）元素垂直居中对齐

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

1. height:300px;  
2. line-height:300px;

2）对块级元素垂直居中对齐
2.1 父元素高度固定的情况
1）父元素的height与line-height值相同
2）需要垂直居中的元素
vertical-align:middle;// 垂直居中对齐
display:inline|inline-block 块级元素转行级元素
HTML代码

1. <div class="center">  
2. <div class="inner"></div>  
3. </div>

CSS代码

1. .center{  
2. width: 500px;  
3. height:300px;  
4. line-height: 300px;  
5. border:1px solid;  
6. }  
7.  .inner{  
8. background: blue;  
9. width: 300px;  
10. height: 100px;  
11. display: inline-block;  
12. vertical-align: middle;  
13.  }