文档章节

内容垂直居中

 低至一折起
发布于 08/19 10:39
字数 140
阅读 36
收藏 0

方法一:

采用上下 padding 形式,将内容放置在垂直居中

.line {
    padding: 2% 0;
    text-align: center;
    height: 5px;
}
<div class="line">
  内容垂直居中
</div>

方法二:

采用高度与行高一直,保证内容只有一行,内容自然垂直居中

.line {
    text-align: center;
    height: 5px;
    line-height: 5px;
}
<div class="line">
  内容垂直居中
</div>

© 著作权归作者所有

粉丝 0
博文 101
码字总数 55635
作品 0
深圳
后端工程师
私信 提问
垂直居中实现方式总结

在网页制作过程中,我们经常要用到图片、文字的垂直居中。今天总结一下垂直居中的方法。 方法一 利用 实现垂直居中 这种方法适用于单行文本垂直居中,如果文本内容太长,出现了换行,换行后的...

呵呵闯
2016/12/05
26
0
如何让div中的内容垂直居中

虽然Div布局已经基本上取代了表格布局,但表格布局和Div布局仍然各有千秋,互有长处。比如表格布局中的垂直居中就是Div布局的一大弱项,不过好在千变万化的CSS可以灵活运用,可以制作出准垂直...

文文1
2015/09/21
25.8K
0
元素居中的N种方式

水平居中 <1>行内元素的居中 被设置元素为文本、图片等行内元素时,水平居中是通过给父元素设置 text-align:center 来实现的。 <2>块状元素的居中 当被设置元素为 块状元素 时用 text-align...

_YM雨蒙
2017/08/16
0
0
集中コレクション,CSS垂直居中最强合集,看看你喜欢哪种?

我们在编辑一个版面,通常都会用到水平居中和垂直居中来设计,而水平居中很好处理,不外乎就是设定margin:0 auto;或是text-align:center;,就可以轻松解决掉水平居中的问题,但一直以来最麻...

前端大佬
05/11
0
0
垂直居中实现方式总结

在网页制作过程中,我们经常要用到图片、文字的垂直居中。今天总结一下垂直居中的方法。 方法一 利用 实现垂直居中 这种方法适用于单行文本垂直居中,如果文本内容太长,出现了换行,换行后的...

musishui
2016/11/09
1K
1

没有更多内容

加载失败,请刷新页面

加载更多

Redis集群搭建

服务器资源 ip 账号 配置 操作系统 xxx.70 root/xxx 磁盘50G(/)+150G(/home)、内存16G、CPU 16core CentOS Linux release 7.2.1511 (Core) xxx.74 root/xxx 磁盘50G(/)+150G(/home)、......

jxlgzwh
7分钟前
2
0
avro

一、 ```我们已经接触过很多序列化框架(或者集成系统),比如protobuf、hessian、thrift等,它们各有优缺点以及各自的实用场景,Avro也是一个序列化框架,它的设计思想、编程模式都和thi...

hexiaoming123
9分钟前
1
0
QML TextInput的字体超出控件范围

本文链接:https://blog.csdn.net/chyuanrufeng/article/details/54691998 问题描述 :QML TextInput输入内容超过TextInput的大小 当输入过多的字符串时,会出现内容超过TextInput的大小,字...

shzwork
10分钟前
1
0
《Java 8 in Action》Chapter 10:用Optional取代null

1965年,英国一位名为Tony Hoare的计算机科学家在设计ALGOL W语言时提出了null引用的想法。ALGOL W是第一批在堆上分配记录的类型语言之一。Hoare选择null引用这种方式,“只是因为这种方法实...

HelloDeveloper
11分钟前
1
0
进击的 Java ,云原生时代的蜕变

作者| 易立 阿里云资深技术专家<br /> <br />导读:云原生时代的来临,与Java 开发者到底有什么联系?有人说,云原生压根不是为了 Java 存在的。然而,本文的作者却认为云原生时代,Java 依然...

阿里巴巴云原生
13分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部