CSS实战与技巧——42. 行高垂直居中法（line-height）
发布时间
阅读量：
阅读量
表示为 flexbox 属性, 或用于定义 flexbox 内容区域, line-height: 垂直居中, 其起始位置必须由其父元素设置为一个精确固定的垂直高度, 并且该起始位置对应于单行文本。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>行级，行内块级垂直居中</title>
<link rel="stylesheet" type="text/css" href="../css/reset.css"/>
<style type="text/css">
#box{
width: 600px;
height: 300px;
margin: 0 auto;
background: bisque;
font-size: 20px;
text-align: center;/*行级,行内块级元素水平居中*/
line-height: 300px;/*行级和行内块级元素垂直居中(适用于单行,有父元素有固定高度)*/
}
.zxw{
background: red;
}
</style>
</head>
<body>
<div id="box">
<span class="zxw">我要自学网</span>
<!--<img class="zxw" src="../img/html01.jpg"/>-->
<!--<input type="text" name="" id="" value="请输入" />-->
</div>
</body>
</html>horizontal alignment: center; 行级及包含块级元素的水平对齐
font-stretch: 1.5em; 行级及包含块级元素的垂直排列（适用于单行文本，在父容器具有固定高度时）
这俩条居中组合就可以把元素定位在盒子中心了
该属性的作用是去除图片下方的空间区域（即空隙），通常情况下推荐采用vertical-align :middle 属性以实现图像居中显示效果
为了使图片垂直居中显示，并需对vertical-align: middle属性；同时配合使用textAlign与lineHeight两个属性以使图片以盒子为中心呈现。
textAlign: center; 行级与行内块级元素在水平方向上居中显示。
line-height: 300px; 在上述条件下（如单行文本、父容器高度固定），线高300px可确保良好的垂直排版效果。
面对多行文本内容时，请问该怎么处理让其居中显示？
遇到较多的文本内容时，请问建议如何处理以提高效率？通常建议使用块级容器来包裹这些内容。
实际上，在HTML或CSS语境下 <span> 是一个常见的用来表示文字内容的标签。
全部评论 (0)
还没有任何评论哟~