很多面试官也会问到的问题
自己总是分不清vertical-align该不该使用
准备整理一下
文本在盒子中水平居中
text-align:center;
文本在盒子中垂直居中
一、使用line-height
只要设置height和line-height数值相等就可以让文本居中了
相关代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>垂直</title>
<style>
.one{
background-color: turquoise;
color: white;
height:100px;
text-align: center;
/* 面试题:如果想要垂直居中 */
line-height: 100px;
}
</style>
</head>
<body>
<div class="one">hello world</div>
</body>
</html>
二、vertical-align:middle
只适用于行内元素,一定记住行内元素不能加宽高,若想修改只能修改display:inline-block
1.前提
盒子中存在多个行内元素
2.基线
行内元素在基线上下排布
基线:写英文字母时,x下面
先看一下这两个问题
Q1:怎么解决行内元素img的图片下有基线的问题呢?
– 1.使用块元素排放图片 –
<div class="box1 box">
<img src="./imges/vertical-test.jpg" alt="" style="display: block;">
</div>
-- 2.给字体大小设置为0 --
<div class="box2 box" style="font-size: 0;">
<img src="./imges/vertical-test.jpg" alt="">
</div>
是不是图片下边的基线距离就没有了
Q2:文字和图片在一起,怎么让图片和文字对齐呢
.box3 >img{
vertical-align:middle;
}
<div class="box3 box">
<span>spingx</span>
<img src="./imges/vertical-test.jpg" alt="">
</div>
基线上方x的1/2处为居中点
Q3:如何达到如下效果?即在盒子有高度的情况下,如何达到居中效果?
①使用vertical-align:middle让.line对应的行内元素与文字在相同的高度;
↓
②使用line-height控制box内的行高达到整体剧中的效果。
.box{
line-height: 3.2em;
}
.box > .line{
/* 一定要让它成为inline-block 因为行内元素不能有宽高 */
display: inline-block;
width:1px;
height:15px;
background-color: #fff;
vertical-align: middle;
text-align: center;
}
<div class="box">
<span>spingx</span>
<span class="line"></span>
<span>spingx</span>
</div>
Q4:如何让一个元素在盒子中垂直居中显示
方法一:设置line-height见Q3
方法二:在要居中的元素后追加一个尾元素,把尾元素设置为inline-block,把它的高度设置为与盒子等同,然后设置vertical-align:middle,这时候该元素也就垂直居中了。另外要给该元素水平居中也只需要在容器中添加text-align:center就可以了。
.box{
background-color: slateblue;
color: #fff;
height: 100px;
text-align:center;
}
/* 追加一个尾元素,让它和盒子一样高,并垂直居中,即在基线上方文字的1/2处居中 */
.box::after{
content: '';
display: inline-block;
height:100px;
vertical-align: middle;
}
<div class="box">hello world</div>
盒子应该位于容器内部,容器通常情况要比盒子大
盒子在容器中水平居中
1.margin:0 auto;
2.定位
position:relative;margin:50%; left:-(盒子宽度的一半);
盒子在容器中垂直居中
1.在父元素中加padding,box-sizing:border-box;
2.在父元素加padding+margin,box-sizing:border-box;