<!DOCTYPE html>

<html lang="en">

<head>

	<meta charset="UTF-8">

	<title>Document</title>

	<style>

		div{width: 200px;height: 300px;margin: 50px auto;text-align: center;background: #ccc;}

		span{text-align: left;font-size: 20px;display: inline-block;vertical-align: middle;border:1px solid red;}

		i{font-size: 0;width: 0;height: 100%;display: inline-block;vertical-align: middle;}

	</style>

</head>

<body>

	<div>

		<span>测试本测试本测试本测试本本测试本本测试本本测试本</span><i></i>

		<!--

			text-align属性不适用于inline类型的标签，适用于块元素

			vertical-align 属性只适用于inline-block类型的便签

			这里span与i元素之间不能有空格否则垂直方向无法居中,

			原因可能是inline-block类型之间换行，浏览器解析时会将

			换行解析成空格，而span的元素的宽是自适应内容的宽度，即div的宽度

			致使span元素与i元素为 “上下关系”，而不是"左右并列"的关系，

			从而vertical-align不起作用

		-->

	</div>

</body>

</html>

以下为测试代码：

<!DOCTYPE html>

<html lang="en">

<head>

	<meta charset="UTF-8">

	<title>Document</title>

	<style>

		div{width: 200px;height: 300px;margin: 50px auto;text-align: center;background: #ccc;}

		span{text-align: left;font-size: 20px;display: inline-block;vertical-align: middle;width:191px;}

		i{font-size: 0;width: 0;height: 100%;display: inline-block;vertical-align: middle;width: 1px;}

	</style>

</head>

<body>

	<div>

		<span>测试本测试本测试本测试本本测试本本测试本本测试本</span>

		<i></i>

		<!--

			span 与 i之间换行

			span width:191px

			i width:1px;

			200-191-1=8？

		-->

	</div>

</body>

</html>

css实现一行居中显示，两行靠左显示的更多相关文章

  1. 谈谈一些有趣的CSS题目-- 单行居中，两行居左，超过两行省略

    开本系列,讨论一些有趣的 CSS 题目,抛开实用性而言,一些题目为了拓宽一下解决问题的思路,此外,涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题中有你感觉 ...

  2. 如何使Label显示时，一行顶部居中，两行靠左显示－－－－董鑫

    有时我们会碰到这种情况,一个要根据内容显示一行还是两行,一行时还要靠着顶部再居中,比如下面 最左边的名称,要求是靠上的,如果按照正常的方式写的话,可能一行的话就会出现居中显示了,不会顶着头部显示. 我 ...

  3. css实现单行居中，两行居左

    居中需要用到 text-align:center,居左是默认值也就是text-align:left.要让两者结合起来需要多一个标签. <h2><p>单行居中,多行居左</ ...

  4. css实现一行居中显示，两行靠左显示，超过两行以引号省略

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. 谈谈一些有趣的CSS题目（五）-- 单行居中，两行居左，超过两行省略

    开本系列,讨论一些有趣的 CSS 题目,抛开实用性而言,一些题目为了拓宽一下解决问题的思路,此外,涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题中有你感觉 ...

  6. 纯CSS实现文字一行居中，多行左对齐的方法

    其实这种需求还是蛮常见的,主要用于产品列表页面,用于产品图片下面,显示产品的名称. 想要实现的效果为: 未知文字长度,当文字长度小于盒子宽度,也就是一行时,文字居中. 当文字长度大于盒子的宽度,会自动 ...

  7. css 控制文本显示两行 超过省略号显示

    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; word-break: break-all; ov ...

  8. background: inherit制作倒影、单行居中两行居左超过两行省略

    1.background: inherit;制作倒影 方法很多,但是我们当然要寻找最快最便捷的方法,至少得是无论图片怎么变化,div 大小怎么变化,我们都不用去改我们的代码. -webkit-box- ...

  9. css实现一行文字居中，多行文字左对齐

    问题及场景: 当内容能一行显示在盒子内时,文字居中对齐. 当内容过多换行后显示在盒子内时,文字左对齐. 其实这种视觉上的需求还是蛮常见的.比如用于弹出提示框,当提示内容比较少时,内容居中显示在弹出框, ...

随机推荐

  1. yd的拔钉子之路之 POI 2017

    写在前面的一些话 如果我NOIP没退役,这大概会写成一个系列吧,所以这算是系列的开始,要写一些奇怪的东西? 首先解释下什么叫“拔钉子”,其实就是在钉子上做题嘛......至于钉子具体是个什么东西就当面 ...

  2. [HEOI2014]逻辑翻译

    ywy_c_asm的良心题解 是道好题 体现了二进制位的形象递归思想,以及将FWT的思路(都是拆位分治)用到题目中的典范 可以暴力高斯消元.完全没有利用2^N以及+-1的良好性质 发现项数,方程和二进 ...

  3. 【分块】【P2801】教主的魔法

    Description 给你一个长度为 \(n\) 的序列,要求资瓷区间加,查询区间大于等于 \(k\) 的数的个数 Input 第一行是 \(n~,~Q\) 代表序列长度和操作个数 下面一行代表序列 ...

  4. Django 分页 以及自定义分页

    Django提供了一个新的类来帮助你管理分页数据,这个类存放在django/core/paginator.py.它可以接收列表.元组或其它可迭代的对象. 基本语法 1 2 3 4 5 6 7 8 9 ...

  5. JAVA实现Excel批量导入

    一.模板下载: 先将模板放在项目WebRoot下的download文件夹下: /** * @Title: downloadFile * @Description: 模板下载 (网络地址) * @par ...

  6. Vue.js随笔二(新建路由+component+添加样式+变量的显示)

    创建一个页面: 1.首先让我们看一下整个vue.js的目录,如下图所示: 2.现在让我们创建一个页面吧: 2-1首先你需要新建路由(就和建立一个如何找到项目文件的目录一个意思):进入src/route ...

  7. HDU 1402 FFT 大数乘法

    $A * B$ FFT模板题,找到了一个看起来很清爽的模板 /** @Date : 2017-09-19 22:12:08 * @FileName: HDU 1402 FFT 大整数乘法.cpp * ...

  8. [Luogu 1351] NOIP2014 联合权值

    [Luogu 1351] NOIP2014 联合权值 存图,对于每一个点 \(u\),遍历它的所有邻接点.以 \(u\) 为中转点的点对中,\((x,y)\) 的联合权值 \(w_x \cdot w_ ...

  9. MySQL VS PostgreSQL：该选择哪个开源数据库？

    Naresh Kumar 是一位软件工程师与热情的博主,对编程与新事物充满了激情和兴趣.近日,Naresh撰写了一篇博文,对开源世界最常见的两种数据库 MySQL 与 PostgreSQL 的特点进行 ...

  10. C语言中的序列点

    TAG: C, 序列点 DATE: 2013-08-07 序列点是程序执行序列中一些特殊的点. 当有序列点存在时,序列点前面的表达式必须求值完毕,并且副作用也已经发生, 才会计算序列点后面的表达式和其 ...