多行文字自动换行居中--实测好用的很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> <!--设置行高来实现- ...
随机推荐
- C# 8.0 中的 Disposable ref structs（可处置的 ref 结构）
官方文档中的解释: 用 ref 修饰符声明的 struct 可能无法实现任何接口,因此无法实现 IDisposable. 因此,要能够处理 ref struct,它必须有一个可访问的 void D ...
- Druid SQL注入防御模块技术浅析
官方参考: https://www.bookstack.cn/read/Druid/ffdd9118e6208531.md 前置知识 什么是Druid? Druid是一个高效的数据查询系统,主要解决的 ...
- 状态估计和KalmanFilter公式的推导与应用
状态估计的概率解释 运动和观测方程: \[\left\lbrace \begin{array}{l} x_k = f(x_{k_1}, u_k) + w_k \\ z_k = h(y_j, x_k) ...
- 自动化利器 Ansible - 从了解到应用
本文说明 本系列使用 ansible 2.9.27 版本来说明和汇总相关信息. # cat /etc/system-release Red Hat Enterprise Linux Server re ...
- 微信小程序canvas 证件照制作
小程序制作证件照过程 利用canvas制作生活中常用的证件照,压缩图片,修改图片dpi.希望给大家带来方便. 证件照小程序制作要点 上传合适的图片,方便制作证件照 调用AI接口,将图像进行人像分割.这 ...
- 基于python的数学建模---轮廓系数的确定
直接上代码 from sklearn import metrics import matplotlib.pyplot as plt from sklearn.cluster import KMeans ...
- 说一下 ArrayList 和 LinkedList 的区别？
本文已收录到 AndroidFamily,技术和职场问题,请关注公众号 [彭旭锐] 提问. 前言 大家好,我是小彭. 在上一篇文章里,我们聊到了基于动态数组 ArrayList 线性表,今天我们来讨论 ...
- PEP8语法规范解释说明
PEP8规范解析 内容概要: 1.PEP8规范是什么? 2.PEP8相关内容 1.PEP8规范是什么 PEP是Python Enhancement Proposal的缩写,翻译为:"Pyth ...
- C温故补缺(三):存储类声明符(auto,register,extern,static)
auto,register,extern,static 四个存储类声明符,用于定义变量/函数的作用域和声明周期 ① auto:自动变量,即普通变量,在平时定义变量时会自动赋予其auto类型 被auto ...
- MySQL进阶实战5，为什么查询速度会慢
一.先了解一下MySQL查询的执行过程 MySQL在查询时,它是由很多子任务组成的,每个子任务都会消耗一定的时间,如果要想优化查询,实际上要优化其子任务,可以消除一些子任务.减少子任务的执行次数.让子 ...