多行文字居中

对于多行文字的居中,用一句话概括就是:把包裹在inline-block 中的文字 放到 line-height为容器高度的 容器中,代码如下:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <style>
  #container{
      width:300px;
      height:300px;
      border:solid 1px grey;
      line-height:300px;
      text-align:center;
  }
  .lineblock{
      display:inline-block;
      line-height:1.4em;
  }
  </style>
</head>
<body>
  <div id="container">
    <div class="lineblock">第一行</br>第二行</div>
  </div>
</body>
</html>

效果如下:

时间: 2024-08-25 11:14:21

多行文字居中的相关文章

css实现一行文字居中,多行文字左对齐

问题及场景: 当内容能一行显示在盒子内时,文字居中对齐. 当内容过多换行后显示在盒子内时,文字左对齐. 其实这种视觉上的需求还是蛮常见的.比如用于弹出提示框,当提示内容比较少时,内容居中显示在弹出框,提示内容比较多时,内容居左对齐.但是其纯CSS实现有点麻烦,一般就放掉这个需求,或者,使用JS实现. 解决方案: 效果如下 CSS实现代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta chars

如何让一个字数不定,行数不定的文字居中?

这两天写页面的时候,遇到一个问题:如何让一段行数和字数不定的文字居于区块的中央 下面是我的方法,可能有点麻烦. 如果路过的各位前辈,有更好的方法,还请在留言中指出.非常感谢. *** 结构 *** <div class="item"> <div class="pic_wrapper"> <img src="https://dummyimage.com/120.png/09f/fff" alt="作者的头像&

文字居中

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

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

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

多行文字垂直居中(完美兼容chrome firefox IE6 7 8 9)

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

大小不固定的图片和多行文字的垂直水平居中

一.大小不固定,多行文字的垂直居中 ① 单行文字 可能很多人都知道如何让单行文字垂直居中显示,就是使用line-height,将line-height值与外部标签盒子的高度值设置成一致就可以了.例如: 单行文字居中显示测试,css样式为:height:3em; line-height:3em;-- ② 多行文字 但是对于外框高度固定,文字大小个数不固定的多行文字呢?文字可能一行显示,也有可能多行显示:文字可能是小号字体,也有可能是大号的.这时候如何让其垂直居中显示呢?看下面! 这里的文字用来做多

UIlabel多行文字自动换行 (自动折行)

UIView *footerView = [[UIView alloc]initWithFrame:CGRectMake(10, 100, 300, 180)]; UILabel *label = [[UILabel alloc]initWithFrame:CGRectMake(10, 100, 300, 150)]; label.text = @"Hello world! Hello world!Hello world! Hello world! Hello world! Hello worl

转 图片、多行文字的水平垂直居中

想必写css的都知道如何让单行文字在高度固定的容器内垂直居中,但是您知道或者想过让行数不固定的文字在高度固定的容器内垂直居中呢?本文将会告诉你如何实现多行文字的垂直居中显示.关于图片垂直居中显示,想必很多写css的人都研究过,或者说是搜寻过方法.淘宝团队似乎提供了一种不错的方法,用font-size解决IE下垂直居中的问题,是个好方法吗?是的,方法是不错,可是问题也很多:不支持img外标签的浮动,致使多图片排列时需添加额外标签:需要记住一些比例参数,上手较难:原理艰深,兼容性不稳定等.但是在我看

大小不固定的图片、多行文字的水平垂直居中

想必写css的都知道如何让单行文字在高度固定的容器内垂直居中,但是您知道或者想过让行数不固定的文字在高度固定的容器内垂直居中呢?本文将会告诉你如何实现多行文字的垂直居中显示. 关于图片垂直居中显示,想必很多写css的人都研究过,或者说是搜寻过方法.淘宝团队似乎提供了一种不错的方法, 用font-size解决IE下垂直居中的问题,是个好方法吗?是的,方法是不错,可是问题也很多:不支持img外标签的浮动,致使多图片排列时需添加额 外标签:需要记住一些比例参数,上手较难:原理艰深,兼容性不稳定等.但是