css实现一行居中显示,两行靠左显示
<!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实现一行居中显示,两行靠左显示的更多相关文章
- 谈谈一些有趣的CSS题目-- 单行居中,两行居左,超过两行省略
开本系列,讨论一些有趣的 CSS 题目,抛开实用性而言,一些题目为了拓宽一下解决问题的思路,此外,涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题中有你感觉 ...
- 如何使Label显示时,一行顶部居中,两行靠左显示----董鑫
有时我们会碰到这种情况,一个要根据内容显示一行还是两行,一行时还要靠着顶部再居中,比如下面 最左边的名称,要求是靠上的,如果按照正常的方式写的话,可能一行的话就会出现居中显示了,不会顶着头部显示. 我 ...
- css实现单行居中,两行居左
居中需要用到 text-align:center,居左是默认值也就是text-align:left.要让两者结合起来需要多一个标签. <h2><p>单行居中,多行居左</ ...
- css实现一行居中显示,两行靠左显示,超过两行以引号省略
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 谈谈一些有趣的CSS题目(五)-- 单行居中,两行居左,超过两行省略
开本系列,讨论一些有趣的 CSS 题目,抛开实用性而言,一些题目为了拓宽一下解决问题的思路,此外,涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题中有你感觉 ...
- 纯CSS实现文字一行居中,多行左对齐的方法
其实这种需求还是蛮常见的,主要用于产品列表页面,用于产品图片下面,显示产品的名称. 想要实现的效果为: 未知文字长度,当文字长度小于盒子宽度,也就是一行时,文字居中. 当文字长度大于盒子的宽度,会自动 ...
- css 控制文本显示两行 超过省略号显示
display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; word-break: break-all; ov ...
- background: inherit制作倒影、单行居中两行居左超过两行省略
1.background: inherit;制作倒影 方法很多,但是我们当然要寻找最快最便捷的方法,至少得是无论图片怎么变化,div 大小怎么变化,我们都不用去改我们的代码. -webkit-box- ...
- css实现一行文字居中,多行文字左对齐
问题及场景: 当内容能一行显示在盒子内时,文字居中对齐. 当内容过多换行后显示在盒子内时,文字左对齐. 其实这种视觉上的需求还是蛮常见的.比如用于弹出提示框,当提示内容比较少时,内容居中显示在弹出框, ...
随机推荐
- SSH不能连接并提示REMOTE HOST IDENTIFICATION HAS CHANGED解决
SSH不能连接并提示REMOTE HOST IDENTIFICATION HAS CHANGED解决方法: 如果提示信息如下: @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ ...
- PID控制算法的C语言实现十一 模糊算法简介
在PID控制算法的C语言实现九中,文章已经对模糊PID的实质做了一个简要说明.本来打算等到完成毕业设计,工作稳定了再着力完成剩下的部分.鉴于网友的要求和信任,抽出时间来,对模糊PID做一个较为详细的论 ...
- webstorm 激活破解方法大全
webstorm 作为最近最火的前端开发工具,也确实对得起那个价格,但是秉着勤俭节约的传统美德,我们肯定是能省则省啊. 方法一:(更新时间:2018/1/23)v3.3 注册时,在打开的License ...
- 「Django」rest_framework学习系列-版本认证
1.自己写: class UserView(APIView): versioning_class = ParamVersion def get(self,request,*args,**kwargs) ...
- Linux下UDP一发一收通信
实现在Linux环境下的UDP通信测试. 注释了while循环,将代码规范化. udpserver.c代码: /******************************************** ...
- EL表达式格式化日期
在EL表达式中要显示"yyyy-MM-dd"格式的日期: 使用<fmt:>格式化标签 1 在页面上导入 <%@ taglib prefix=" ...
- ZOJ 3964 NIM变形
LINK 题意:n堆石子,Alice 和 Bob 轮流取石子,谁不能再取或被对方取完为败.但是对于alice拥有限制:b=0此堆正常无限制:b=1此堆Alice只能取奇数个石子:b=2只能取偶数个石子 ...
- Qt undefined reference to ***
错因:某个类声明了一个函数但是没有定义就直接使用.
- 详细说说如何生成验证码—ASP.NET细枝末节(4)
前言 今天小编详细的说一下,ASP.NET网站开发过程中生成验证码的全部问题. 本文的目标,是让读者了解,生成验证码涉及的全部基础知识问题. 当然这里说的是比较简单的验证码. 真正符合要求的验证码,涉 ...
- HDU 1521 排列组合 (母函数)
题目链接 Problem Description 有n种物品,并且知道每种物品的数量.要求从中选出m件物品的排列数.例如有两种物品A,B,并且数量都是1,从中选2件物品,则排列有"AB&qu ...