html 元素水平居中方式

本文将简单叙述元素居中的基本方法。

 

代码区:

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>center</title>
 6 
 7 </head>
 8 <body>
 9 <h1 style="text-align: center">Html中元素的水平居中方式</h1>
10 <p style="text-align: center;">行内元素</p>
11 <div style="margin: 0 auto; width: 200px; text-align: center;">定宽块元素</div>
12 <table align="center">
13     <tr>
14         <td>
15             <div>不定宽块元素,方法1</div>
16         </td>
17     </tr>
18 </table>
19 <div style="text-align: center;">
20     <div style="display: inline-block;">不定宽块元素,方法2</div>
21 </div>
22 <div style="height: 30px;">
23     <div style="float: left; position: relative;left: 50%;">
24         <div style="position: relative;left: -50%;">不定宽块元素,方法3</div>
25     </div>
26 </div>
27 </div>
28 </html>

 

正文

 

一、需要进行水平居中的元素分类:

1,行内元素(不定宽)。

2,定宽块元素。

3,不定宽块元素。

二、基本居中方式:

1,行内元素:text-align:center;

2,定宽块元素:margin:0 auto;

三、不定宽块元素:

1.转化为定宽块元素:把元素封装在table中;table元素会随内容改变宽度,而其宽度值可以被获取到,则可以把table看作为定宽的块元素。

代码实现:

<table style=“margin: 0 auto;”>

<tr>

<td>

<div>align-center</div>

</td>

</tr>

</table>

2.转化为行内元素:把元素封装在一个块父元素中(宽度不影响);把元素设置成行内元素,把父元素设置居中属性(父元素中的子元素根据父元素的大小进行居中,而不是父元素进行居中)。

代码实现:

<div class=“parent”style=“text-align:center;”>

<div style=”display:inline;”>align-center</div>

</div>

3.使用三层结构,position属性:结构 great-parent>parent>div;great-parent为居中的参考体,parent向右偏移50%(以great-parent为基准),div向左偏移50%(以parent为基准)。

代码实现:

<div class=“great-parent”>

<div class=“parent”

style=“float:left;//获取内容区的宽;

position:relative;left:50%;”>

<div style=“position:relative;

left:-50%;”>align-center</div>

</div>

</div>

*思路:

great-parent参考体;parent父容器;div内容;

1.parent的宽度=div的宽度;

2.patent以great-parent的宽度为基值,向右偏移50%;这时,parent和div的基线(左侧临界线)到达great-parent的中轴线;

3.div以parent的宽度为基值,向左偏移50%;因为parent的宽度=div的宽度,所以div的中轴线和parent的基线以及great-parent的中轴线重合,到达div居中于great-parent的效果。

*难点:float的作用;

由于未设定宽度值的块元素,载入时会继承父元素的宽度值,

一开始所有的元素的宽度值都等于great-parent的宽度;

当执行“float=left;”时,parent的宽度值会被重新赋值,

该值来自其内容的宽度;

parent中只有div,浏览器会计算div的大小,而div自身也没有设定宽度值,则继续计算div内部内容的大小,div内部有字符或者其他内容,div将计算这些内容的显示大小;

然后,div把这个值往上逐级返回到浏览器,浏览器再把这个值赋给parent的宽度值。

最后,由于parent的宽度值被重新赋值,div就再次继承parent的新的宽度值。parent的宽度=div的宽度=div内部内容的宽度。

转载于:https://www.cnblogs.com/darcrand-blog/p/5721733.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值