html文字垂直居中怎么用,如何使用CSS垂直居中文本？

CSS的常见任务是垂直居中文本或图像；虽然CSS2不支持垂直对齐，但我们可以通过组合一些属性来垂直居中块。下面本篇文章就来给大家介绍一下使用CSS垂直居中文本的方法，希望对大家有所帮助。

方法一：指定将外部块格式化为表格单元格

表格单元格的内容可以垂直居中，将外部块格式化为表格单元格就可垂直居中文本。

示例：将段落置于具有特定给定高度的块内

.container {

width: 400px;

height: 200px;

border: 1px solid red;

min-height: 10em;

display: table-cell;

vertical-align: middle

}

这是一段测试文本！

效果图：

方法二：使用line-height属性

这是垂直对齐文本的另一种方法。此方法适用于单行和多行文本，但仍需要固定高度的容器：

.container{

height: 200px;

line-height: 200px;

text-align: center;

border: 2px dashed #f69c55;

}

span {

display: inline-block;

vertical-align: middle;

line-height: normal;

}

这是一段测试文本！这是一段测试文本！这是一段测试文本！这是一段测试文本！

这是一段测试文本！

效果图：

CSS只要调整div的大小，通过将div的line-height属性设置为其高度来对齐span，并使span具有vertical-align：middle的内联块。然后它将跨度的行高设置为正常，因此其内容将在块内自然流动。

html文字垂直居中怎么用,如何使用CSS垂直居中文本？相关推荐

设置div中文字超出时自动换行和css实现文本超出N行之后显示省略号等
一.对于div强制换行 1.(IE浏览器)white-space:normal; word-break:break-all;这里前者是遵循标准. #wrap{white-space:normal; w ...
css不能控制文字属性有什么,巧用CSS动态控制文本的属性_css
用css可以很方便地动态改变文本的属性,从而可制作出动态地使文字变大.缩小.改变文字颜色.改变文本的背景.字间距.行间距等等网页特效,一切都在你的掌握之中.是不是有点玄?事实就是如此.那一定很复杂吧? ...
利用vertical-align实现图片文字垂直居中对齐（HTML、CSS）
利用vertical-align实现图片文字垂直居中对齐(HTML.CSS) <!DOCTYPE html> <html lang="en"><hea ...
css 图文上下居中,CSS垂直居中的6种方法
垂直居中一直是CSS布局中比较令人头疼的问题,相比于水平居中,垂直居中对于不同的元素类型需要采取截然不同的策略,因此常常会因为策略的误用导致无法成功居中.这篇文章总结了垂直居中的6种常见策略. Ver ...
CSS垂直居中，你会多少种写法？
CSS控制居中是前端开发中非常常用的布局技能,本文列出几种CSS控制元素居中的几种方法. 谈及HTML元素居中展示,涉及到水平居中和垂直居中,以及水平垂直居中. 由于HTML文档流是水平方向的,所以水 ...
css垂直居中和水平居中方法总结
CSS垂直居中总结文档转载网络并做整合 ...
CSS 垂直居中问题总结
在做页面的时候,不论PC端,还是移动端,都会遇到各种垂直居中的问题,在这里,我列举了一些,有些是在工作中遇到了,有的是自己整理的,还不是特别全面,以后会后续更新,如果有不同看法,或者有新的这种CSS垂 ...
css垂直居中问题～
css垂直居中有好几种方法: 使用vertical-align属性对于确定高的元素可以margin:负半高; top:50%; 绝对定位position:absolute,设置top:0; bott ...
高度不定垂直居中_经典：CSS垂直居中的七种方法
点击上方"程序员黑叔",选择"置顶或者星标" 你的关注意义重大! 作者: 来自互联网我们在编辑一个版面,通常都会用到水平居中和垂直居中来设计,而水平居中很好处 ...

html文字垂直居中怎么用,如何使用CSS垂直居中文本？

html文字垂直居中怎么用,如何使用CSS垂直居中文本？相关推荐

最新文章

热门文章