html如何设置字体纵向居中,css 如何使文字垂直居中

单行文本，只需要将文本行高(line-height)和所在区域高度(height)设为一致即可：

这是单行文本垂直居中

/*css代码*/

#div1{

width: 300px;

height: 100px;

margin: 50px auto;

border: 1px solid red;

line-height: 100px; /*设置line-height与父级元素的height相等*/

text-align: center; /*设置文本水平居中*/

overflow: hidden; /*防止内容超出容器或者产生自动换行*/

}

多行文本垂直居中分为两种情况，一个是父级元素高度不固定，随着内容变化；另一个是父级元素高度固定。

父级高度不固定的时，高度只能通过内部文本来撑开。这样，我们可以通过设置内填充(padding)的值来使文本看起来垂直居中，只需设置padding-top和padding-bottom的值相等：

这是多行文本垂直居中，

这是多行文本垂直居中。

/*css代码*/

#div1{

width: 300px;

margin: 50px auto;

border: 1px solid red;

text-align: center; /*设置文本水平居中*/

padding: 50px 20px;

}

父级高度固定的时，设置父级div的display属性：display: table;；然后再添加一个div包含文本内容，设置其display:table-cell;和vertical-align:middle

这是固定高度多行文本垂直居中，

这是固定高度多行文本垂直居中。

/*css代码*/

#outer{

width: 400px;

height: 200px;

margin: 50px auto;

border: 1px solid red;

display: table;

}

#middle{

display:table-cell;

vertical-align:middle;

text-align: center; /*设置文本水平居中*/

width:100%;

}

html如何设置字体纵向居中,css 如何使文字垂直居中相关推荐

html设置字体黑体居中,css如何让字体居中？
使用DIV CSS实现字体居中的CSS样式单词为text-align,其值为center(居中).下面我们来看一下css使用text-align属性设置文字居中的方法. css可以使用text-ali ...
html如何设置图片自动居中,css如何使图片居中？
在我们的WEB前端css开发过程中,我们避免会遇到让图片居中的情况,为了网页美观以及用户的体验,我们有时候就要让图片居中,那么我们也都知道图片居中的方法有很多,今天我们就给大家详细介绍下CSS实现图片 ...
html文字垂直居中自动换行,css 如何使文字垂直居中
单行文本,只需要将文本行高(line-height)和所在区域高度(height)设为一致即可: 这是单行文本垂直居中 /*css代码*/ #div1{ width: 300px; height: 1 ...
html盒子嵌套居中,css在盒子中垂直居中和固定居中
顶部固定居中我是固定的 .w960{ width: 960px; margin:0 auto; } .fixed{ position: absolute; top:0; left: 0; right ...
Latex设置字体大小及表格中的文字大小等
参考 Latex设置字体大小及表格中的文字大小等 - 云+社区 - 腾讯云 Latex中遇到表格超出半个分栏的情况,可以考虑将表格中的字体设小来解决,方法如下: \begin{table}[h]\t ...
css滤镜使文字变3D效果
为什么80%的码农都做不了架构师?>>> 四夕刚从 OECP社区看到了一篇文章 <css滤镜使文字变3D效果>,Css的确很强大, W3C 公布了样式单( CSS ...
html文本环绕’,css如何使文字环绕显示
css如何使文字环绕显示 css实现文字环绕可以使用float来实现,下面介绍下具体的实现方法. 1)代码部分 .img-left { border: 3px solid #005588; width ...
设置字体大小用css的哪个属性,css设置字体大小的属性名是什么
css设置字体大小的属性名是"font-size",该属性使用css中表示尺寸的单位(px.em.rem等)设置字体大小,也可以使用百分号等单位来设置.实际上font-size设置 ...
html文本纵向居中,css使a标签内文本垂直居中
css使a标签内文本垂直居中 a标签属于行内元素,默认情况下是不支持设置宽高的,仅依靠内容来"撑大自己".这时我们需要用css的display属性并且值设置为block即可.这么设 ...

html如何设置字体纵向居中,css 如何使文字垂直居中

html如何设置字体纵向居中,css 如何使文字垂直居中相关推荐

最新文章

热门文章