1 样式属性描述
先来一段代码进行展示:
father{ /* 父级元素 (块级元素)*/
width:500px;
height:300px;
background:pink;
margin:100px auto;
text-align:center;
}
.father img{ /* 行块级元素 */
width:100px;
vertical-align:bottom;
}
.father .son{ /* 没有宽高的子级(块级元素) */
background:orange;
}
.father p{ /* 有宽高的子级(块级元素) */
width:200px;
height:20px;
background:skyblue;
}
.father span{ /*子级是行内元素*/
background:yellow;
}
<div class="father">
<img src="img./1.jpg" alt="">
<div class="son">我是div</div>
<p>我是块级元素p</p>
<span>我是行级元素span</span>
</div>
效果如图所示:
总结:text-align的使用规则:
(0): 默认情况下:元素和文字都是左对齐 。
(1)只在块元素中使用,直接用在内联元素上不生效。
(2)对块元素内是行内元素和行块级元素都有居中效果。
(3)对于块级元素内部也是块级元素时,内部块级元素继承了父级的text-align属性,然后对包含在其中的文本进行居中对齐。
3.1 .son子级块级元素没有设置宽高:宽度与父级一致,高度由文本撑开,文本相对于子级居中。
3,2 p子级有宽高时,子级与父级左上角对其,文字在子级内居中。
3 水平居中
总结:
(1)行内元素水平居中
1.1 父级是块级,直接给父级text-align。
1,2 父级不是块级,先将父级转为块级,在给父级text-align。
(2)块级元素水平居中
2.1 使用margin:0 auto;居中
2.2 转为行内元素或行块级元素
2.3 使用定位属性
方法一:元素定位居中(左右为0居中)
方法二:元素定位居中(拉伸法)
方法三:使用transform函数
2.4 使用flex布局
(1)行内元素水平居中
1.1 首先看其父级是不是块级元素,如果是则直接给父元素设置:
text-align:center;
div{
width:300px;
height:100px;
background:pink;
text-align:center;
}
<div>
<span>我是行内元素</span>
</div>
1.2 其父级若不是块级元素,则先将父级先转为块级元素,然后再给父元素设置:text-align:center;
.father{
width:300px;
height:100px;
background:pink;
display:block; /* 父级转为块级元素 */
text-align:center;
}
<span class="father">
<span class="son">我是行内元素</span>
</span>
以上在网页中效果:
(2)块级元素水平居中
方案一:使用margin:auto;居中
当已知块级元素的宽度时,给予内部块级元素margin:0 auto;其作用就是子级相对父级居中。补充:若也想使父级居中,也可以另外给margin设置居中。
div{
width:400px;
height:200px;
background:skyblue;
margin:0 auto; /* 父级水平居中 */
}
p{
width:50px;
height:50px;
background:yellowgreen;
margin:0px auto; /* 子级在父级内水平居中 */
}
<div>
<p>我是块级元素</p>
</div>
效果如图所示:
方案二:转为行内元素或行块级元素
当子级元素宽度不确定之时,默认子元素的宽度和父元素一样,这时需要设置子元素为display: inline-block; 或 display: inline;()即将其转换成行内块级/行内元素,再给父元素设置 text-align:center;
.father{
width:400px;
height:200px;
background:skyblue;
margin:0 auto; /* 父级水平居中 */
text-align:center;
}
.son{
background:yellowgreen;
display:inline; /* 转为行内元素 */
text-align:center;
}
<div class="father">
<p class="son">我是块级元素</p>
</div>
补充:.son转为行内元素后,设置宽高没有效果,内容的高度撑起.son的高度。
效果如图所示:
方案三:使用定位属性
首先设置父元素为相对定位,再设置子元素为绝对定位。
方法一:元素定位居中(左右为0),子元素宽度可以不确定。
.father{
width:500px;
height:200px;
background:orange;
position:relative;
}
.son{
width:50px;
height:50px;
background:pink;
position:absolute;
right:0;
left:0;
margin:auto;
}
<div class="father">
<div class="son">我是块级元素</div>
</div>
方法二:元素定位居中(拉伸法),需要在已知子元素的宽度前提下使用。
.father{
width:500px;
height:200px;
background:orange;
position:relative;
}
.son{
width:50px;
height:50px;
background:pink;
position:absolute;
left:50%;
margin-left:-25px;
}
<div class="father">
<div class="son">我是块级元素</div>
</div>
方法三:利用css3新增属性transform: translateX(-50%);
.father{
width:500px;
height:200px;
background:orange;
position:relative;
}
.son{
width:50px;
height:50px;
background:pink;
position:absolute;
left:50%;
transform:translateX(-50%);
}
<div class="father">
<div class="son">我是块级元素</div>
</div>
效果图:
方案四:使用flexbox布局实现(宽度定不定都可以)
使用flexbox布局,只需要给待处理的块状元素的父元素添加属性 display: flex; justify-content: center;
.father{
width:500px;
height:200px;
background:#ff00cc;
display:flex;
justify-content:center;
}
.son{
width:50px;
height:50px;
background:#00ff66;
}
<div class="father">
<div class="son">我是块级元素</div>
</div>
效果如图所示: