好久没写前端，今天突然发现就连文字垂直居中都忘了
<!DOCTYPE html>
<html>
<head>
<title>测试</title>
<style type="text/css">
.line{
}
.imgInLine{
width:30px;
height:30px;
vertical-align: middle;
}
.textInLine{
vertical-align: middle;
}
</style>
</head>
<body>
<div class="line">
<img class="imgInLine" src="./704.png">
<span class="textInLine">我是一行文字</span>
</div>
</body>
</html>最简单的垂直居中的设置就是vertical-align: middle;
这个属性是作用与当前元素，设定当前元素位于父元素中垂直方向的位置，
如果父元素有两个或以上的子元素，要想居中就要给所有子元素设置这个属性，如果只给文字设置vertical-align: middle;可能达不到预想中的效果
或者直接应用到所有子元素
.line *{
vertical-align: middle;
}以此铭记，以免时间长了又忘了
扫一扫
326
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
