使用vertical-align让行内块元素垂直居中
Posted yangwenlong
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了使用vertical-align让行内块元素垂直居中相关的知识，希望对你有一定的参考价值。
vertical-align 用法定义 该属性定义行内元素(或者行内块---一般也会把行内块当做行内元素看待)的基线相对于该元素所在行的基线的垂直对齐。允许指定负长度值和百分比值。这会使元素降低而不是升高。
在表单元格中，这个属性会设置单元格框中的单元格内容的对齐方式。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>使用vertical-align让行内块元素垂直居中</title>
<style>
*{
margin: 0; padding: 0;
}
.box{
width: 1200px;
height: 300px;
background-color: pink;
line-height: 300px;
}
.contain{
width: 600px;
height: 100px;
background: red;
display: inline-block;
vertical-align: middle;
/* vertical-align只作用在行内（行内块）元素，所以要转变模式 */
line-height: 100px;
/* 行内元素（尤其是文字）相关的css属性具有继承性，
这个地方设置line-height 是为了消除父级的影响
*/
}
</style>
</head>
<body class="zhuce">
<section class="box">
<section class="contain">我要垂直居中</section>
</section>
vertical-align该属性定义行内元素(或者行内块---一般也会把行内块当做行内元素看待)的基线相对于该元素所在行的基线的垂直对齐。允许指定负长度值和百分比值。这会使元素降低而不是升高。
在表单元格中，这个属性会设置单元格框中的单元格内容的对齐方式。
</body>
</html>
以上是关于使用vertical-align让行内块元素垂直居中的主要内容，如果未能解决你的问题，请参考以下文章
垂直居中小记 line-height table vertical-align：middle