如何实现单行与多行文字的居中

在项目中遇到一个问题，在一个宽度为百分比形式设定宽度的div中，文字可能不多但是也可能较多，会超过一行。怎么才能做到不管1行还是2行3行，文字都可以上下左右居中呈现。

只需要这样设置css属性即可

div{

display: -webkit-flex;

display: flex;

-webkit-align-items: center;

align-items: center;

-webkit-justify-content: center;

justify-content: center;

}

原文地址：https://www.cnblogs.com/ranyonsue/p/9378867.html

时间： 2024-10-11 02:22:31

如何实现单行与多行文字的居中的相关文章

单行和多行文字溢出省略

.text-ellipsis /* { 单行文字溢出省略 */ overflow: hidden; /* 溢出隐藏 */ text-overflow: ellipsis; /* 文字溢出省略 */ white-space: nowrap; /* 文字不换行 */ } .multiline-ellipsis { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webki

CSS实现单行与多行文字省略（truncation）

在上一篇文章小div布局之卡片堆叠(card-stacking)中有多行文字溢出省略的效果,这篇文章就对这种效果(包括单行文字溢出省略)的实现做个简单的记录,以防自己忘记.具体来说,就是要实现这种文字排布效果. html代码如下: 1 <div class="container"> 2 <div class="box"> 3 <div class="box-content"> 4 <h5 class=&q

单行、多行文字超出显示省略号

单行 display:inline-block/ block;overflow: hidden; text-overflow:ellipsis; white-space: nowrap;

Jquery : 上下滚动--单行批量多行文字图片翻屏【转】

原文发布时间为:2010-02-01 -- 来源于本人的百度文章 [由搬家工具导入] 注：如果和左右滚动一起使用，则会出现冲突一单行滚动(ad:http://www.gz138.com) <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xml

css设置文字上下居中，一行文字居中，两行或多行文字同样居中,附带效果图

附图: 1. 利用Flex布局实现 demo.html 1 <div class="demo demo-flex"><span>孤云将野鹤,岂向人间住.莫买沃洲山,时人已知处.</span></div> style.css 1 .demo { 2 width: 120px; 3 height: 200px; 4 border: 1px solid red; 5 /*line-height: 25px;*/ 6 font-size: 12p

jquery 文字滚动大全 scroll 支持文字或图片单行滚动多行滚动带按钮控制滚动

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-

div css每行文字显示一半同时文字字体重叠显示不全解决方法

CSS DIV布局中出现单行或多行文字的每行文字内容不能显示全,上下行文字有一点点重叠现象,文字字体只显示一半解决方法,在低版本IE特别明显文字字体显示不全,在谷歌浏览器等高版本IE浏览器测试还好些. 新手布局时候特别爱出现DIV盒子里文字字体显示不完整,音乐沙发甚至上下行文字有一点重叠现象. css字体文字重叠显示不完整重叠字体字体文字重叠显示不完整同时有重叠重合效果截图在DIV+CSS布局中造成这种字体显示不全,音乐沙发显示一半同时多行文字有一点点重叠情况原因:css行高小于CSS字体大小

多行文字居中

对于多行文字的居中,用一句话概括就是:把包裹在inline-block 中的文字放到 line-height为容器高度的容器中,代码如下: <!DOCTYPE html><html><head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>JS B

div垂直居中的N种方法单行/多行文字(未知高度/固定高度)

说到这个问题的时候,也许有人会问CSS中不是有vertical-align属性来设置垂直居中的吗?即使是某些浏览器不支持我只需做少许的 CSSHack技术就可以啊!所以在这里我还要啰嗦两句,CSS中的确是有vertical-align属性,但是它只对(X)HTML元素中拥有 valign特性的元素才生效,例如表格元素中的<td>.<th>.<caption>等,而像<div>.<span>这样的元素是没有valign特性的,因此使用verti