多行文字自动换行居中--实测好用的很OK
实测好用的很~~~
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.outDiv {
border: 1px solid black;
width: 200px;
height: 200px;
text-align: center;
overflow: hidden;
}
.outDiv .innerDiv1 {
display: inline-block;
vertical-align: middle;
}
.outDiv .innerDiv-fix {
display: inline-block;
width: 0;
height: 100%;
line-height: 100%;
vertical-align: middle;
visibility: hidden;
}
</style>
</head>
<body>
<div class="outDiv">
<span class="innerDiv1">多行文字自动换行居中</span><span class="innerDiv-fix">
<!-- 此标签不能换行 --></span>
</div>
</body>
</html>
多行文字自动换行居中--实测好用的很OK的更多相关文章
- UIlabel多行文字自动换行 (自动折行)
UIView *footerView = [[UIView alloc]initWithFrame:CGRectMake(, , , )]; UILabel *label = [[UILabel al ...
- css设置文字上下居中,一行文字居中,两行或多行文字同样居中。
转:https://www.cnblogs.com/handsomeBoys/p/6599062.html HTML: <div class="book-detail-store-it ...
- css文字上下居中,一行文字居中,两行或多行文字同样居中
附图: 1. 利用Flex布局实现 demo.html <div class="demo demo-flex"><span>孤云将野鹤,岂向人间住.莫买沃洲 ...
- css--实现一个文字少时居中,文字换行时居左的样式
前言 最近群里的小伙伴去面试,遇到这样一个问题,面试官问:"用 css 对一行文字进行布局,当文字不够换行的时候,这行文字要居中显示,当文字出现换行的时候,这行文字要靠左显示.", ...
- 纯CSS实现文字一行居中,多行左对齐的方法
其实这种需求还是蛮常见的,主要用于产品列表页面,用于产品图片下面,显示产品的名称. 想要实现的效果为: 未知文字长度,当文字长度小于盒子宽度,也就是一行时,文字居中. 当文字长度大于盒子的宽度,会自动 ...
- 实现多行文字居中方法(兼容IE6)
<p class="mulit_line"> <span style="font-size:12px;">这里是高度为150像素的标签内 ...
- 多行文字垂直居中(完美兼容chrome firefox IE6 7 8 9)
在说到这个问题的时候,也许有人会问CSS中不是有vertical-align属性来设置垂直居中的吗?即使是某些浏览器不支持我只需做少许的CSS Hack技术就可以啊!所以在这里我还要啰嗦两句,CSS中 ...
- div垂直居中的N种方法 单行/多行文字(未知高度/固定高度)
说到这个问题的时候,也许有人会问CSS中不是有vertical-align属性来设置垂直居中的吗?即使是某些浏览器不支持我只需做少许的 CSSHack技术就可以啊!所以在这里我还要啰嗦两句,CSS中的 ...
- div+css使多行文字垂直居中?
1.单行文字: 设置height = line-height; 多行文字: 设置 padding, 自己要计算一下? vertical-align: 可以设置垂直居中, 但是只是针对本身就具有 ali ...
- 多行文字水平垂直居中在div
<BODY> <div class="box"> <h3>1.单行文字居中</h3> <!--设置行高来实现- ...
随机推荐
- Codeforces 1672 E. notepad.exe
题意 这是一道交互题,有n个字符串,每个字符串长度:0-2000, n :0-2000 有一个机器对他进行排版,你可以给他一个每行的最大宽度w,那么每行只能放长度为w的字符: 每行相邻两个字符串之间至 ...
- XAF新手入门 - 类型子系统(Types Info Subsystem)
类型子系统概述 类型子系统是XAF的核心概念,但我们平时却很少关注它,它集中存储了模块中的类型,它是生成应用程序模型(Application Model)的基础,它与XAF中其它的概念都有所关联,了解 ...
- Java:既然有了synchronized,为什么还要提供Lock?
摘要:在Java中提供了synchronized关键字来保证只有一个线程能够访问同步代码块.既然已经提供了synchronized关键字,那为何在Java的SDK包中,还会提供Lock接口呢?这是不是 ...
- 网页状态码(HTTP状态码)。
网页状态码(HTTP状态码). 状态码 说明 详情 100 继续 请求者应当继续提出请求.服务器已收到请求的一部分,正在等待其余部分. 101 切换协议 请求者已要求服务器切换协议,服务器已确认并准备 ...
- 通过Jenkins,执行远程服务器的自动化脚本
通过Jenkins,可自动执行写好的应用部署.自动化测试等的脚本工具,实现测试环境的应用自动定时更新.自动执行测试等. 1. 安装SSH插件 进入[系统管理]-[插件管理]-[可用插件],搜索Publ ...
- 直播CDN调度技术关键挑战与架构设计
作者:胡济麟 1.背景介绍 1.1 直播业务特点 互联网视频直播是一种消息媒介形态,提供时产时消的内容,经过多年,已经发展出秀场.游戏.电商.体育等多种业务形态.主要特点是:内容实时产生实时消费,对时 ...
- nginx转发到uwsgi的配置
server{ server_name ; listen 80 default_server; add_header Access-Control-Allow-Origin *; add_header ...
- Spring Cloud Circuit Breaker 使用示例
Spring Cloud Circuit Breaker 使用示例 作者: Grey 原文地址: 博客园:Spring Cloud Circuit Breaker 使用示例 CSDN:Spring C ...
- c++详细学习——引用
1 引用(reference) 引用是一个变量的别名,故引用在申明的时候必须给初始值,从此他们就建立了"不能离婚的婚姻关系",改变引用就会改变被引用的原变量 1 int main( ...
- goioc:一个使用 Go 写的简易的 ioc 框架
目录 goioc 介绍 快速上手 接口介绍 使用 goioc 如何使用 生命周期 实例化 获取对象 结构体字段依赖注入 Dispose 接口 反射形式使用 goioc 如何使用 接口.结构体.结构体指 ...