首页 > 代码库 > 多行文字或者单行文字的垂直居中解决方案
多行文字或者单行文字的垂直居中解决方案
做项目的时候经常会遇到多行文字的垂直居中，如果是单行文字直接：height:40px;line-height:40px;就可以了。如果是多行文字，用这个方法，只能看见第一行文字，基于这种情况，找到了一中比较好的方法。
<!doctype Html><Html> <Head> <Meta Charset="Utf-8"> <Title>文字垂直居中</Title> <Style> Div{ Width:160px; Height:60px; Background:#e4393c; Display:table; } Div Span{ Display: Table-cell; Vertical-align: Middle; Overflow: Hidden; Text-align: Center; } </Style> </Head> <Body> <Div><Span>文字垂直居中文字垂直居中文字垂直居中</Span></Div> <Br><Br><Br><Br> <Div><Span>文字垂直居中文</Span></Div> </Body></Html> 样式如下：
这样就可以做到垂直居中，这个是最基本的样式，如果有需要可以进行进一步的修饰。
多行文字或者单行文字的垂直居中解决方案
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。