|
以下例子中，触及到的CSS属性值。
.parent-frame {
width: 200px;
height: 200px;
border: 1px solid red;
}
.child-frame {
width: 100px;
height: 100px;
border: 1px dotted blue;
}
1: text-align:center，水平居中
块状元素，水平居中
<div class="parent-frame">
子元素水平居中
<i style="display:block; text-align: center;color: blue">块状元素，水平居中</i>
</div>
子元素水平居中 块状元素，水平居中
2：margin: 0 auto，水平居中
水平居中。上下外边框距为0，上下外边距浏览器会自动计算平分
<div class="parent-frame">
子元素水平居中
<i class="child-frame" style="display: block;margin: 0 auto">块状元素，水平居中</i>
</div>
子元素水平居中 块状元素，水平居中
3：line-height值，垂直居中
垂直居中。line-height属性，设置行间的距离（行高）。不准许运用负值。 单行文本的元素才适用，多行元素中不适用这种办法。元素内容是单行，并且其高度是固定不变的，
<div class="parent-frame">
<div style="line-height: 200px;">line-height值=父height值</div>
</div>
line-height值=父height值
4： 运用float属性，协同relative定位，实现水平居中
给父元素设置float，而后将父元素整体向右移动50%，再将子元素整体向左移动50%，来实现水平居中。
记得将父元素清除浮动。
<div class="parent-frame">
<div style="float: left; position: relative; left: 50%; clear: both;" >
<div style="position: relative; left: -50%">虽然宽度 区别weiqinl</div>
</div>
<div style="float: left; position: relative; left: 50%; clear: both;">
<div style="position: relative; left: -50%">但 同样</div>
</div>
<div style="float: left; position: relative; left: 50%; clear: both;">
<div style="position: relative; left: -50%">水平居中了</div>
</div>
<div style="float: left; position: relative; left: 50%; clear: both;">
<div style="position: relative; left: -50%"> 运用float属性，记得清楚浮动</div>
</div>
</div> 虽然宽度区别weiqinl 但同样 水平居中了 运用float属性，记得清楚浮动
5：运用table布局，默认垂直居中
table默认垂直居中vertical-align:middle。倘若还想要水平居中，那便是行内元素，添加属性text-align: center
<table clas
| 
发表于 2024-6-30 05:40:19
